.leftmenu {
	margin-left: 8px;
	background: #333;
	border: 1px solid #444;
	border-radius: 6px;
	color: #ffffff;
	display: block;
	padding: 8px 12px;
	width: 165px;
	font-weight: normal;
	text-align: left;
	margin-bottom: 2px;
} 

.gap { line-height: 3px; }



.topbar { 
	width: calc(100% - 16px);
	margin: 8px;
	background: linear-gradient(135deg, #2c3e50, #3498db);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 0px 20px;
	color: #ffffff;
	font-weight: 600;
	font-size: 13px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.4);
	backdrop-filter: blur(10px);
}

	

	

	

.content { width: 100%;

	padding: 0px; }



.contenthead { 
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px 12px 0 0;
	padding: 16px 20px;
	color: #ffffff;
	font-weight: 600;
	font-size: 16px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}



.contentcontent { 
	background: rgba(40, 44, 52, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0 0 12px 12px;
	border-top: none;
	padding: 20px;
	color: #e0e0e0;
	font-size: 14px;
	line-height: 1.6;
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}





.bar_a{

	width: 100px;

	border: 1px solid #000000;

	background-color:#666666;

}

.bar_b{

	font-size: 10px;

	background-color:#FFFF00;

}





body {
	margin: 0 auto;
	border: none;
	max-width: 1200px;
	background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
	min-height: 100vh;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight: normal;
	color: #e0e0e0;
	box-shadow: 0 0 50px rgba(0,0,0,0.5);
} 





h1 , h2 , h3 , h4 , h5 , h6 {

font-family : "Trebuchet MS", Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif; 

font-weight : normal; 

} 



.head, .headbox , .dynabox , a.leftmenu , a.topmenu {

margin-left: 8px;

font-weight : bold; 

text-decoration : none; 

font-size : 80%; 

font-family : Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif; 

} 



a 																	{color : #000000; } 

.body a:hover, .dynabox .headbox a:hover							{color : #ffffff; }



.pos0														{background-color : #ffffff; color : #000000; } 

.pos1 {background-color : #1E1E1E;}

.mainbox , .dynabox , a.leftmenu:link , a.leftmenu:visited 	{background-color : #333; border : 1px solid #444; color : #ffffff; } 

.pos2 , .topnav , a.leftmenu:hover 									{background-color : #333; color : #ffcc00; border : 1px solid #444; }





.neg0 																{background-color : #000000; } 

.neg1 , a.topmenu:hover												{background-color : #4d75a0; color : #ffffff; border : #000000; } 

.neg2 , .headbox , a.topmenu:link , a.topmenu:visited {
	background-color: #7d9fc4;
	color: #ffffff;
	border: 1px solid #444;
	width: 165px;
	margin-left: 8px;
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 8px;
	text-align: center;
	font-weight: bold;
} 



a.leftmenu:link {
	display: block;
	padding: 8px 12px;
	border: 1px solid #444;
	border-radius: 6px;
	width: 165px;
	font-weight: normal;
	text-align: left;
	background: #333;
	color: #ffffff;
	text-decoration: none;
	margin-bottom: 2px;
} 



a.leftmenu:hover {
	display: block;
	padding: 8px 12px;
	border: 1px solid #444;
	border-radius: 6px;
	width: 165px;
	font-weight: normal;
	text-align: left;
	background: #444;
	color: #ffcc00;
	text-decoration: none;
	margin-bottom: 2px;
} 



a.leftmenu:visited {

display : block; 

padding-top : 2px; 

padding-right : 2px; 

padding-bottom : 2px; 

padding-left : 2px; 

border-style : solid; 

border-top-width : 0; 

border-right-width : 1px; 

border-bottom-width : 1px; 

border-left-width : 1px; 

width : 145px; 

font-weight : normal; 

text-align : left; 

} 



a.topmenu:link {

display : inline; 

padding-top : 5px; 

padding-right : 0; 

padding-bottom : 5px; 

padding-left : 0; 

border-style : solid; 

border-top-width : 0; 

border-right-width : 0; 

border-bottom-width : 0; 

border-left-width : 1px; 

text-align : center;  

} 



a.topmenu:hover {

background-color : #4d75a0; 

display : inline; 

padding-top : 5px; 

padding-right : 0; 

padding-bottom : 5px; 

padding-left : 0; 

border-style : solid; 

border-top-width : 0; 

border-right-width : 0; 

border-bottom-width : 0; 

border-left-width : 1px; 

text-align : center; 

} 



a.topmenu:visited {

display : inline; 

padding-top : 5px; 

padding-right : 0; 

padding-bottom : 5px; 

padding-left : 0; 

border-style : solid; 

border-top-width : 0; 

border-right-width : 0; 

border-bottom-width : 0; 

border-left-width : 1px; 

text-align : center; 

} 



.headbox {
	background-color: #111;
	border: 1px solid #444;
	padding: 8px 12px;
	color: #ddd;
	display: block; 
	width: 165px;
	margin-left: 8px;
	text-align: center;
	border-radius: 6px;
	margin-bottom: 8px;
	font-weight: bold;
} 



.topbox {
	margin: 8px;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: #000000;
	min-height: 180px;
	padding: 20px;
	border-radius: 16px;
	backdrop-filter: blur(15px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.5);
} 



.topnav {

border : solid ; 

border-width : 0 1px 1px; 

padding-top : 3px;

padding-bottom : 0; 

} 



.mainbox {
	border: none;
	background: rgba(30, 34, 42, 0.95);
	border-radius: 12px;
	padding: 20px;
	margin: 10px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
} 



.mainbox p a {

font-weight : bold; 

font-size : 90%; 

} 



.dynabox {

border: 1px solid #333;

text-align : center; 

} 



.dynabox .headbox {

border-style : dashed; 

border-top-style : solid; 

border-right-width : 0; 

border-left-width : 0; 

padding-top : 3px; 

padding-left : 0; 

padding-right : 0; 

padding-bottom : 3px; 

} 



.dynacontent {

padding-top : 3px; 

padding-left : 5px; 

padding-right : 5px; 

padding-bottom : 3px; 

text-align : left; 

font-size : 70%; 

font-weight : normal; 

} 



a {
	color: #3498db;
	text-decoration: none;
	transition: all 0.3s ease;
}

a:hover {
	color: #2980b9;
}

/* explicit username colors to override general link colors */
.username {
	color: #D4A855 !important;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}
.username.admin {
	color: #66ffff !important; /* admin teal */
	text-decoration: none;
	font-weight: 700;
}

/* Modern enhancements */
* {
	box-sizing: border-box;
}

html {
	background: linear-gradient(135deg, #0c0c1f 0%, #1a1a2e 50%, #16213e 100%);
	min-height: 100vh;
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Modern buttons */
input[type="submit"], 
input[type="button"], 
button {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	color: white;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	background: linear-gradient(135deg, #5a6fd8 0%, #6b4190 100%);
}

/* Modern form inputs */
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 6px;
	padding: 10px 14px;
	color: #e0e0e0;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: #3498db;
}

/* Modern tables */
table {
	background: rgba(40, 44, 52, 0.95);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
	border-collapse: separate;
	border-spacing: 0;
}

th {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	font-weight: 600;
	padding: 15px 20px;
}

td {
	padding: 12px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Loading animations */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.contentcontent,
.mainbox {
	animation: fadeIn 0.6s ease-out;
}

/* Responsive improvements */
@media (max-width: 1024px) {
	body {
		max-width: 95%;
		margin: 0 auto;
	}
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(135deg, #764ba2, #667eea);
}