/* Body styling */
body {
    font-family: Arial, sans-serif;
    background-color: #333;  /* Light grey background */
    margin: 0;
    padding: 0;
}

/* Main container */
.container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
	background-color: #333; 
	/* Unvisited link */
.sidebar a {
		color: black;  /* Change to the color you prefer */
		}

		/* Visited link */
.sidebar a:visited {
		color: black;  /* Change to the color you prefer */
		}

		/* Hovered link */
.sidebar a:hover {
		color: white;  /* Change to the color you prefer */
		}

		/* Active link */
.sidebar a:active {
		color: green;  /* Change to the color you prefer */
		}
}



/* Sidebar for navigation */
.sidebar {
    background-color: #a0a0a0;  /* Dark grey background */
    width: 165px;
    padding: 0px;
    color: #333;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
	margin: 0px;
    height: 100vh;
    z-index: 1000;  /* Ensure sidebar is above other content */
	font-size: 14px;
    text-align: center;
}

.sidebar-logo {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-bottom: 0px;
}

/* Sidebar header */
.sidebar h2, .sidebar h3 {
    font-size: 16px;
	margin-left:  5px;
    margin-bottom: 0px;
    text-align: left;  /* Align text left for better readability */
}

/* Sidebar list */
.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul li {
    margin-left: 20px;
    margin-bottom: 10px;
    position: relative;
    text-align: left;
}


/* Sidebar main link styles */
.sidebar ul li a {
    display: block; /* Ensure the link takes up the full width of the list item */
    padding: 5px;  /* Adjust padding for spacing */
	margin-left: 20px;
    color: #333;    /* Text color */
    text-decoration: none;  /* Remove underline */
    position: relative; /* Ensure the submenu can be positioned relative to the link */
    width: 100%; /* Ensure the a tag takes full width */
}

/* Submenu container */
.sidebar ul li ul {
    display: none; /* Initially hidden */	
    position: absolute; /* Position submenu relative to parent */
    left: 100%; /* Position submenu to the right of the parent */
    top: 0; /* Align submenu with the top of the parent */
    background-color: #a0a0a0; /* Background color for submenu */
    padding: 0; /* Ensure no extra padding inside the submenu */
    margin: 0; /* Remove any margin to avoid shifting */
    z-index: 1000; /* Ensure submenu is above other elements */
	width: 125px;
}

/* Submenu links */
.sidebar ul li ul li a {
    display: block; /* Take up the full width and height of the menu item */
    padding: 10px;  /* Ensure same padding for main and submenu items */
    text-decoration: none;  /* Remove underline */
    color: #fff; /* black text for consistency */
    width: 100%; /* Ensure the submenu items fill the full width */
}

/* Sidebar hover effect */
.sidebar ul li:hover > a, .sidebar ul li.active > a {
    background-color: #ca8647;  /* Dark orange highlight for the main menu */
    color: #fff;
    width: 135px; /* Ensure the hover effect fills the full width */
	font-size: 14px;
}

/* Submenu hover effect */
.sidebar ul li ul li:hover > a {
    background-color: #ca8647;  /* Dark orange highlight for submenu */
    
	color: #fff;	
	font-size: 14px;
    width: 115px; /* Ensure the hover effect fills the full width */
}

/* Show submenu on hover */
.sidebar ul li:hover ul {
    display: block; /* Display submenu when parent is hovered */
    margin: 0; /* Ensure no margin is applied to avoid vertical shifting */
	padding: 0;
	font-size: 14px;
}

/* Ensure no extra margin/padding */
.sidebar ul li {
    margin: 0;
    padding: 0;
    text-align: left;
}

.sidebar ul li ul li {
    white-space: nowrap;  /* Prevent text from wrapping */
    margin: 0; /* Remove margins from submenu items */
    padding: 0; /* Remove padding */
}

.sidebar ul li ul li a {
    display: block;
    width: 90%;
    margin: 0; /* Ensure no margin is applied to avoid vertical shifting */
	padding: 5px;
    color: black;
}

/* Content area styling */
.content {
    flex-grow: 1;
    padding: 6%;
    background-color: #333;  /* Light grey background */
    color: #a0a0a0;
	margin-left: 150px;
    position: relative;
    z-index: 500;
}

.content a {
		color: black;  /* Change to the color you prefer */
		}

		/* Visited link */
.content a:visited {
		color: black;  /* Change to the color you prefer */
		}

		/* Hovered link */
.content a:hover {
		color: black;  /* Change to the color you prefer */
		}

		/* Active link */
.content a:active {
		color: green;  /* Change to the color you prefer */
		}
}
h1 {
    font-size: 32px;
    color: #fff;  /* black text */
}

p {
    font-size: 16px;
    line-height: 1.6;
}

strong {
    font-size: 18px;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
	background-color: #a0a0a0;
	color: black;
	text-decoration: none;
	
}

table, th, td {
    border: 1px solid #ddd;
	background-color: #a0a0a0;
    padding: 10px;
	color: black;
	text-decoration: none;
}

table, th, td  a {
		color: black;  /* Change to the color you prefer */
		text-decoration: underline;
		}

		/* Visited link */
		a:visited {
		color: black;  /* Change to the color you prefer */
		text-decoration: underline;
		}

		/* Hovered link */
		a:hover {
		color: black;  /* Change to the color you prefer */
		text-decoration: underline;
		}

		/* Active link */
		a:active {
		color: green;  /* Change to the color you prefer */
		}
}
th {
    background-color: #a0a0a0;  /* Dark grey for table headers */
    color: white;
}

td {
    background-color: #a0a0a0;
    color: black;
}

/* Class container styling */
.class-container {
    
    padding-bottom: 2%;
	text-decoration: none;
}

/* Grid layout for the spell-list-tables container */
.spell-list-tables {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
    grid-gap: 20px;  /* Add spacing between the tables */
}

/* Ensures each table stretches to fill its column */
.spell-list-table {
    display: flex;
    flex-direction: column;
    background-color: #808080;
    border: 1px solid #ddd;
    padding: 10px;
}

/* Compact table row styling */
.spell-list-table td, .spell-list-table th {
    padding: 0px;
    line-height: 1.1;
}

.spell-list-table h3 {
	color: black;
	}
	
	

/* Zebra striping for "Spell Level" */
.level-even {
    background-color: #A0A0A0; /* Light blue for even spell levels */

}

.level-odd {
    background-color: #606060; /* White for odd spell levels */
	color: #A0A0A0;
}

/* Zebra striping for "Spells" */
.spell-even {
    background-color: #a0a0a0; /* Light grey for even rows */
}

.spell-odd {
    background-color: #ccc; /* White for odd rows */
}

/* Table header styling */
thead th {
    background-color: #808080;
    color: black;
    padding: 10px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Link styling */
a {
    color: #333;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
/* Style for links inside table rows */
.spell-list-table td a, .spell-list-table th a {
    color: black; /* Change to your desired link color */
    text-decoration: underline; /* Default link style */
}

.category {
    flex-grow: 1;
    padding: 6%;
    background-color: #333;  /* Light grey background */
    color: #a0a0a0;
	margin-left: 150px;
    position: relative;
    z-index: 500;
}
.category a {
    color: black; /* Default color for links in .category */
}

/* Visited link within .category */
.category a:visited {
    color: black; /* Visited color */
}

/* Hovered link within .category */
.category a:hover {
    color: black; /* Hover color */
}

/* Active link within .category */
.category a:active {
    color: green; /* Active color */
}
.crafting-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust spacing between columns */
}

.crafting-container .category-column {
    flex: 1; /* This ensures each column has an equal width */
    min-width: 200px; /* Set a minimum width for each column */
}

.crafting-container h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.crafting-container ul {
    list-style-type: none;
    padding: 0;
}

.crafting-container li {
    margin: 5px 0;
}

.crafting-container a {
    text-decoration: none;
}

.crafting-container a:hover {
    text-decoration: underline;
}
/* Default button styles */
button {
    background-color: #ddd;
    color: black;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Active button styles */
button.active {
    background-color: #ca8647; /* orange background for the active button */
    color: white;
}

/* Hover effect for non-active buttons */
button:not(.active):hover {
    background-color: #ccc; /* Slightly lighter grey */
}
.three-column-list {
    column-count: 3;       /* Splits list into 3 columns */
    column-gap: 20px;      /* Space between columns */
    list-style-type: none; /* Removes bullet points */
    padding: 0;            /* Removes padding */
}

.three-column-list li {
    margin-bottom: 10px;   /* Adds spacing between items */
}

.abilities-table {
	color:black;
	text-decoration: none;
}

.abilities-table td a, .abilities-table th a {
    color: black; /* Change to your desired link color */
    text-decoration: underline; /* Default link style */
}
 .link-list {
	flex-grow: 1;
    padding: 6%;
    background-color: #333;  /* Light grey background */
    color: #a0a0a0;
	margin-left: 150px;
    position: relative;
    z-index: 500;
}

.link-list a {
    color: #A0A0A0; /* Change to your desired link color */
    text-decoration: underline; /* Default link style */
}