/*
  Free to use CSS template by Katie (#106445).
  Cave image replacement code by Bobtail (#79288).
  This code may be altered, edited, or re-uploaded. 
  Design by Quake #69866.
*/


/* FONT (From Google Fonts) */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

/* BACKGROUND */

body {
	background: url('https://jwolf2021me.neocities.org/pexels-i-layda-mutlu-61452084-32478366.jpg') center center fixed;
	background-size: 100%;
	font-family: 'Raleway', sans-serif;
	color: white;
	font-size: 11px;
}


/* FEED ALL, PLAY ALL */

.feature {
	background: #1f4529 !important;
	color: white !important;
	border: none !important;
	border-radius: 5px !important;
}


/* TOPBAR ("Welcome back, ___"), NAVBAR (Den/Crossroads/Etc.) */

.topbar {
	background: #1f4529;
	border: 10px #406d4a;
	border-style: ridge;
	border-top: none;
	color: #07150a;
	border-radius: 10px;
	font-family: 'Raleway', sans-serif;
}

.navbar {
	background: #1f4529;
	border-bottom: none;
	font-family: 'Raleway', sans-serif;
	color: #07150a;
	border-radius: 1px;
}

.navbar li a {
	color: #07150a !important;
}

/* NAVBAR HOVER COLOR */

.navbar li a:hover {
	background: rgba(0, 0, 0, 0.2) !important;
}


/* MAIN PANEL */

/* RIGHT SIDE */
.container.main {
	background: rgba(0, 0, 0, 0.7);
	box-shadow: none;
}

/* LEFT SIDE */
.col-md-9 {
	background: none;
}


/* BREADCRUMB (Home / Den) */

.breadcrumb {
	background: #406d4a;
}

.breadcrumb .active {
	color: #FFFFFF;
}


/* ALERTS (ie. "Your lionesses have returned from hunting!") */

.alert {
	background: #406d4a;
	border: none;
	color: #FFFFFF;
}

.alert-warning,
.alert-danger {
	background: #406d4a;
	color: #FFFFFF;
}


/* "King Dynasty, Pride Dynasty, Achievements, Showcase" Panels */

.feature,
div.left {
	background: #1f4529;
	border: none;
}


/* ENERGY BARS, ACHIEVEMENTS, & BOOKMARKS */

.panel {
	background: #1f4529 !important;
	box-shadow: none !important;
	border: none !important;
	color: #000000 !important;
}

/* ENERGY BAR BACKGROUND */
.progress {
	background: rgba(0, 0, 0, 0.3);
	color: #000000 !important;
}

/* ENERGY BAR TEXT */
.progress div {
	color: #000000 !important;
}

/* ENERGY BAR COLOR */
.progress-bar {
	background: #406d4a;
	color: #000000 !important;
	height: 90%;
}


/* CHAT */

.s-chat-message:nth-child(even) {
	background: #1f4529 !important;
	border: none !important;
}

.s-chat-message:nth-child(odd) {
	background: #406d4a !important;
	border: none !important;
}

/* PINNED MESSAGE */
.s-chat-message__pinned {
	background: #1f4529 !important;
	color: #000000 !important;
	border: 1px !important;
	border-bottom: #112616 1px solid !important;
	border-bottom-color: #112616 !important;
}

#chatMessagePinned.s-chat-message__pinned {
   	border: 1px !important;
	border-bottom: #112616 1px solid !important;
	border-bottom-color: #112616 !important;
}
.s-chat-message_timestamp {
	color: #000000 !important;
}

div#chatMessageContainer {
	border: none !important;
}

/* CURRENT CHANNEL TAB (MAIN, SALES, ETC.) */
button#label_currentChannel {
	border: none !important;
	background: #406d4a !important;
}


/* BIGGEST HEADER ("___"'s DEN) */

h1 {
	color: #406d4a;
	font-size: 72px;
	text-align: center;
}


/* MEDIUM HEADER */

h2 {
	color: #000000;
	font-size: 24px;
	text-align: center;
}


/* SMALL HEADER */

h3 {
	color: white !important;
	font-size: 14px !important
}


/* LION INFO TABLE (Level, Stats, Branch, Territory Count, Etc.) */


/* PANEL BACKGROUND COLOR */
.table {
	background: rgba(108, 157, 115, 0.4);
	border: none !important;
	border-collapse: separate;
	border-radius: 5px;
}


/* HEADERS COLOR (King Name + Title, "There are _ lions with mutations in _'s pride.") */
.top,
.bottom,
th {
	background: #1f4529 !important;
	color: #FFFFFF !important;
	border-radius: 5px;
}


/* Block of color where "Territory Description, Player Name, Avatar URL" etc. are */

.table .left {
	background: rgba(108, 157, 115, 1)
}

/* Affects the color behind your territory description, player name, etc. */

input,
select,
textarea {
	background: rgba(108, 157, 115, .6) !important;
	border: none !important;
	border-color: black;
	border-radius: 5px;
	box-shadow: none !important;
	color: black !important;
	text-shadow: none !important;
}


/* Color behind "Level, Stats, Branch, Territory" etc. */

.inner-table .left {
	background: #1f4529 !important;
}


/* Color behind the number of all of the things above */

.inner-table .right {
	background: #406d4a
}

/* IGNORE */
.right_odd {
	background: none !important;
}


/* ACCOUNT OPTIONS PANELS  (Friend Requests Toggles, etc.) */

.item-header {
	background: #1f4529 !important;
	color: #000000  !important;
}

.item {
	background: #406d4a !important;
	border: none !important;
}


/* BEETLE MOUND TOPBAR (Where it says Beetle Training Grounds, Beetle Battling, etc.) */

.sub_menu {
	background: #1f4529 !important;
}

.sub_menu_item_selected {
	background: #1f4529 !important;
}


/* Affects the color behind "_ Unsorted", "_ Pregnant Lionesses", etc. and cave/mound names */

.cave-grid,
.mound-grid {
	background: #1f4529;
	border: none !important;
}


/* LINKS & LINK HOVER COLOR */

a:link,
a:visited {
	color: white!important;
	transition: 0.5s !important;
	text-shadow: 0px 0px 8px rgba(4, 2, 1, 0.3);
	font-size: 15px;
	font-family: Raleway;
}

a:hover {
	color: gray !important;
}


/* BOXES (Copy paste to add more or less) */

.boxcontainer {
	background: none;
	height: auto;
	padding: 0px;
	display: flex;
	justify-content: center
}

.Box1 {
	float: left;
	background: #1f4529;
	color: #000000 ;
	padding: 15px;
	border: none;
	border-radius: 5px;
	margin: 5px;
	height: 250px;
	width: 250px;
	overflow: hidden;
	margin-bottom: 25px;
	transition: height 1s;
/* HOW FAST HOVER BOX EXPANDS TO FULL SIZE */
}

/* HOVER BOX (SIZE WHEN HOVERING OVER) */
.Box1:hover {
	overflow-x: hidden;
	overflow-y: auto;
	height: 400px;
}

.Box2 {
	float: left;
	background: #1f4529;
	color: #000000 ;
	padding: 15px;
	border: none;
	border-radius: 5px;
	margin: 5px;
	height: 250px;
	width: 250px;
	overflow: hidden;
	margin-bottom: 25px;
	transition: height 1s;
/* HOW FAST HOVER BOX EXPANDS TO FULL SIZE */
}

/* HOVER BOX (SIZE WHEN HOVERING OVER) */
.Box2:hover {
	overflow-x: hidden;
	overflow-y: auto;
	height: 400px;
}


/* SCROLL BAR */

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}


/* SCROLL BAR BACKGROUND */

::-webkit-scrollbar-track {
	background: #000000;
}


/* SCROLL BAR "THUMB" */

::-webkit-scrollbar-thumb {
	background: #000000;
	border-radius: 4px;
}


/* LION AND USER AVATAR OPACITY */

div#lion_image {
	opacity: 1;
}

table#player img {
	opacity: 1;
}


/* CIRCULAR LION AND USER AVATAR */

div#lion_image {
	border-radius: 50% !important;
	overflow: hidden;
	margin-top: 1px;
}

table#player img {
	border-radius: 50% !important;
	overflow: hidden;
}


/* LIODEN LOGO REPLACER */

div.container.main>div:nth-child(1)>nav>div.navbar-header>a>img {
	content: url('IMAGE URL HERE');
}


/* PREGNANT LIONESSES */

div.cave-grid>img {
	content: url('https://jwolf2021me.neocities.org/5bd16cc34f4e2-wallpaper-preview.jpg')!important;
}


/* CAVES (Copy paste to add more) */

a[href$="The Dead Primals"]>div.cave-grid>img {
	content: url('https://jwolf2021me.neocities.org/5bd16cc34f4e2-wallpaper-preview.jpg')!important;
}


/* UNSORTED */

a[href$="unsorted.php?id=USERID"]>div.cave-grid>img {
	content: url('IMAGE URL HERE')!important;
}


/* PRIDE OVERVIEW */

a[href$="lionoverview.php?id=USERID"]>div.cave-grid>img {
	content: url('IMAGE URL HERE')!important;
}


/* MOUNDS */

.mound-grid img {
	background: url('https://static.lioden.com/images/dynamic/backgrounds/cavewaterfall.png');
	width: 0;
	height: 0;
	padding-top: 80px;
	padding-right: 130px;
}
.credit {
	background: #1f4529;
	color: white;
	padding: 5px;
	border: 1px solid black;
	position: fixed;
	text-align: center;
	border-radius: 10px;
	left: 0px;
	bottom: 0px;
	width: 180px;
	height: 45px;
	overflow: auto;
}
.member-online {
    background: #406d4a;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    display: inline-block;
}




.dissolveAbout {
    background-image:url('https://jwolf2021me.neocities.org/istockphoto-1395849030-612x612.jpg');
    width:797.5px;
    height:150px;
    overflow:hidden;
    transition:0.5s ease-in-out;
    background-color:#1f4529;
    border:5px solid #406d4a;
	border-style: ridge;
	border-radius: 10px;
}

.dissolveAboutTop {
    width:797.5px;
    position:absolute;
    z-index:99;
    font-family:'Raleway', sans-serif;;
    font-size:45px;
    line-height:140px;
    margin:auto;
    margin-left:-10px;
    text-transform:uppercase;
    transition:0.5s ease-in-out;
    color:#8bb38d;
}

.dissolveAboutBottom {
    margin:0;
    position:relative;
    width:775.5px;
    height:198px;
    margin-top:500px;
    z-index:100;
    transition:0.5s ease-in-out;
    padding:5px;
    background-color:rgba(108, 157, 115, 0.6);
    text-align:justify;
    color:white;
    overflow-y: auto;
    font-size: 15px;
}

.dissolveAbout:hover .dissolveAboutTop {
    font-size:55px;
    transition:0.9s ease-in-out;
}

.dissolveAbout:hover .dissolveAboutBottom {
    margin-top:0px;
    top:0;
    transition:0.9s ease-in-out;
}

.smokeHovers {
    background-image:url('https://jwolf2021me.neocities.org/istockphoto-1395849030-612x612.jpg');
    width:387px;
    height:490px;
    overflow:hidden;
    display:inline-block;
    transition:0.9s ease-in-out;
    margin-left:20px;
    margin-top:10px;    
    background-color:#363a3b;
    border:5px solid #62676a;
}

.smokeHoversTop {
    width:387px;
    position:absolute;
    z-index:99;
    font-family:'Julius Sans One';
    font-size:35px;
    line-height:490px;
    margin:auto;
    margin-left:-10px;
    text-transform:uppercase;
    transition:0.9s ease-in-out;
    color:#b32231;
}

.smokeHoversBottom {
    margin:0;
    position:relative;
    width:378px;
    height:490px;
    margin-top:500px;
    z-index:100;
    transition:0.9s ease-in-out;
    padding:5px;
    background-color:rgba(43, 43, 43,0.5);
    text-align:justify;
    color:#ddd;
    overflow-y: auto;
}

.smokeHovers:hover .smokeHoversTop {
    font-size:0px;
    transition:0.9s ease-in-out;
}

.smokeHovers:hover .smokeHoversBottom {
    margin-top:0px;
    top:0;
    transition:0.9s ease-in-out;
}