/* standard elements */
* {
	margin: 0;
	padding: 0;
}

a {
text-decoration: none;
color: #999;
}
a:hover {color: #CCC;}

body {
  background-image: url('hexagon-pattern.svg');
  background-repeat: repeat;
  background-size: 100px 87px; /* Matches the updated SVG height */
  background-position: 0 0;
  background-color: #1a1a1a; /* Fallback color */
	color: #BBB;
	font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}

p,ul {
	font-size: 1.2em;
	padding-bottom: 1.2em;
}

blockquote {font: bold 1em sans-serif;}

center {
text-align: center;
}
.quote {
	background: url(/img/quote.gif) no-repeat;
	color: #d8d8d8;
	display: block;
	font: normal 1.1em "Lucida Sans Unicode",serif;
	margin-bottom: 12px;
	padding-left: 28px;
}

code {
	background: #444;
	display: block;
	font-size: 12px;
	margin: 0 10px 12px;
	overflow: auto;
	padding: 8px 10px;
	white-space: pre;
	
}
form input.button {
	height: 20px;
	padding: 0px 5px;
	border: 2px solid #222;
	cursor: pointer;
	font-size: 10px !important;
	width: auto !important;
	color: #222;
	font-weight: bold;
	}
.button {
	height: 20px;
	padding: 0px 5px;
	border: 2px solid #222;
	cursor: pointer;
	font-size: 10px !important;
	width: auto !important;
	color: #222;
	font-weight: bold;
	}
.button:hover {
	color: #bbb;
	}
form input.button:hover {
	color: #bbb;
	}
form {
	margin: 0px;
	padding: 10px 0px;
	}
.posted {margin-bottom: 5px; font-size: x-small; background-color: #191919;}
.posted2 {margin-bottom: 5px; font-size: x-small; background-color: #282828;}
form input {
	border: 1px solid #333;
	background: #4B4B4B;
	color: #bbb;
	font-size: 11px;
	padding: 2px;
	margin-bottom: 2px;
	}
.textbox {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;
color:#D7DCE9;
background-color:#666666;
border:1px #191928 solid;
}
form input:focus {
	border: 1px solid #222;
	background: #555;
	color: #fff;
	}

form textarea {
	display: block;
	float: left;
	border: 1px solid #333;
	background: #4B4B4B;
	color: #bbb;
	font-size: 11px;
	padding: 2px;
	margin-bottom: 2px;
	}

form textarea:focus {
	border: 1px solid #222;
	background: #555;
	color: #fff;
	}
	
form select {
	display: block;
	float: left;
	border: 1px solid #333;
	background: #4B4B4B;
	color: #bbb;
	font-size: 11px;
	padding: 2px;
	margin-bottom: 2px;
	}

form select:focus {
	border: 1px solid #222;
	background: #555;
	color: #fff;
	}
img {border: none;}

ul {margin-left: 2em;}
h1 {font: normal 2.4em sans-serif;}
h2 {
	font: bold 1.6em Verdana,sans-serif;
	padding-bottom: 4px;
}
.table-style {
    margin: 40px 0 40px 20px;
    width: 100%;
}
/* misc */
.clearer {clear: both;}
.stripes {
	background: #333 url(img/stripe.gif);
	height: 6px;
}
.left {float: left;}
.right {float: right;}

/* header */

/* Reset any margins and padding for the entire page */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; 
}

.stats-wrapper {
    background-color: #303030;
    padding: 10px;
    border: 1px solid #444;
}

/* Adjust the header */
.header {
    background-image: url(../img/banner_mk2.png); /* Ensure the correct image path */
    background-size: cover; /* Ensures the image covers the header area */
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
    padding: 0;
    height: 300px; /* Adjust height as needed */
    display: block;
    overflow: hidden;
}

.header a {
    color: #888;
    display: block;
    line-height: 120px;
    text-decoration: none;
    width: 100%;
}

.header span {
    padding-left: 32px;
}

.header a:hover {
    color: #BBB;
}

/* structure */
.container {
	border: 3px solid #444;
	border-top: none;
}

.main {
	background: #303030;
	border-bottom: 1px solid #2A2A2A;
	border-left: 1px solid #2A2A2A;
}
.main .left {width: 64%;}
.main .noleft {width: 100%;}
.main .right {width: 36%;}

.content {
	border-left: 1px solid #444;
	border-top: 1px solid #444;
	padding: 16px;
	font-size: 11px;
}

table.forums, table.forumsmb {
font-family: Georgia,Arial,Helvetica,sans-serif;
width: 90%;
border: 0px;
display: table;
color: #B3B7BC;
border-collapse: collapse;
border-spacing: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
} 

/* Caption 1 (the one for displaying sub-headers like "topics, posted" etc) */

td.caption1 {
border: 1px #353637 solid;
font-size: 12px;
line-height: 15px;
padding-bottom: 1px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
text-align: left;
}

/* Caption 2 color and properties (this one displaying main menu,  New Topic text bg, New Message text bg) */

td.caption2 {
padding: 4px;
height: 20px;
font-size: 11px;
font-weight: bold;
line-height: 15px;
}

/* Caption 3 (used for Last Discussions, topic titles, Forums selection) */

td.caption3 {
background-color: #25292F;
padding: 4px;
height: 20px;
font-size: 11px;
line-height: 15px;
vertical-align: top;
}

/* Caption 4 (the one for displaying not separate headers like Forum, Topic, Poster etc. on 1st page, Buttons menu, left info cell) */

td.caption4 {
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
line-height: 15px;
text-align: left;
vertical-align: top;
}
/* Caption 5 (used for user input like password/login and registration etc) */

td.caption5 {
border: 1px #353637 solid;
background-color: #25292F;
padding: 4px;
height: 20px;
font-size: 11px;
line-height: 15px;
vertical-align: top;
}

/* Caption 6 (this one is for displaying title headers (search, stats, user reg/prefs) ) */

td.caption6 {
background-color: #25292F;
border: 1px #B3BDC4 solid;
padding: 4px;
height: 18px;
font-size: 12px;
font-weight: bold;
}
/* Forum layout */
.forum-section {
    background-color: #111;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.forum-category {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #222;
}

.forum-category:last-child {
    border-bottom: none;
}

.forum-icon {
    flex: 0 0 50px;
    margin-right: 20px;
}

.forum-icon img {
    width: 40px;
    height: 40px;
}

.forum-details {
    flex: 1;
}

.forum-title {
    font-size: 1.6em;
    color: #EEE;
    font-weight: bold;
    margin-bottom: 5px;
}

.forum-description {
    font-size: 1em;
    color: #999;
}

.forum-stats {
    flex: 0 0 200px;
    text-align: right;
    color: #999;
    font-size: 0.9em;
}

.forum-stats p {
    margin: 0;
}

.last-post {
    color: #f44336;
}

.breadcrumb {
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* Additional styles for dark theme and layout */
body {
  background-image: url('hexagon-pattern.svg');
  background-repeat: repeat;
  background-size: 100px 87px; /* Matches the updated SVG height */
  background-position: 0 0;
  background-color: #1a1a1a; /* Fallback color */
    color: #bbb;
    font-family: "Lucida Sans Unicode", sans-serif;
}

.content {
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
}

.clearer {
    clear: both;
}

/* Topics/forums/threads content cell color #1 */

.tbCel1{
background: #191919;
}

/* Topics/forums/threads content cell color #2 */

.tbCel2{
background: #18181C;
}


.thread1{
background: #191919;
}

/* Topics/forums/threads content cell color #2 */

.reply2{
background: #282828;
}


table.forumsmb{
margin-bottom:12pt;
}

.tbl {
	font-size:11px; padding:3px 4px 3px 4px;
}

.tbl1 {
	font-size:11px;
    background-color : #222;
    padding:4px;
    text-align: left;
}

.tbl2 {
	font-size:11px;
	padding:4px;
	text-align: left;
}
.sig {
	background: url(img/bgh1.gif) repeat-x left bottom;
	color: #EEE;
	margin-bottom: 10px;
	padding: 6px 0 4px;
}

/* content elements */
.content h1 {
	background: url(img/bgh1.gif) repeat-x left bottom;
	color: #EEE;
	margin-bottom: 10px;
	padding: 6px 0 4px;
}
.content h2 {
	background: url(img/bgh1.gif) repeat-x left bottom;
	color: #EEE;
	margin-bottom: 10px;
	padding: 6px 0 4px;
}

.content a {
	color: #999;
	text-decoration: underline;
}

.content a:hover {color: #CCC;}
.content .descr {margin-bottom: 5px; font-size: x-small;}
.content .news { font-size: 12px;}

/* navigation */
.nav2 {background: #191919 url(img/nav.gif);}
.nav2 a {
	background: #191919 url(img/nav.gif);
}
.nav2 a:hover {
	background: #191919 url(img/nav_hover.gif);
}

/* navigation */
.nav {background: #191919 url(img/nav.gif);}
.nav a {
	background: #191919 url(img/nav.gif);
	border-right: 1px solid #161616;
	color: #CCC;
	float: left;
	font: bold 1em Verdana,sans-serif;
	line-height: 51px;
	padding: 0 20px;
}
.nav a:hover {
	background: #191919 url(img/nav_hover.gif);
}

/* sub-navigation */
.subnav {
	background: #2A2A2A;
	border: 1px solid #1E1E1E;
	border-top-color: #444;
	font-size: 12px;	
	padding: 12px;
	}
.subnav h2 {
	background: url(img/bgh1.gif) repeat-x left bottom;
	color: #EEE;
	margin-bottom: 10px;
	padding: 6px 0 4px;
}
.subnav name {
	background: url(img/bgh1.gif) repeat-x left bottom;
	color: #EEE;
		font-size: 13px;
	
}

.subnav a {
	color: #999;
	text-decoration: underline;
}
.morelink a{
	text-decoration: none;
}

.subnav a:hover {color: #CCC;}

.subnav h1 {padding-top: 8px;}
.subnav ul {margin: 0;}
.subnav li {
	background: url(img/li.gif) no-repeat left bottom;
	list-style: none;
	margin: 0;
}
.subnav li a {
	color: #777;
	line-height: 2.4em;
	padding-left: 18px;
	text-decoration: none;
}
.subnav li a:hover {color: #BBB;}

/* menu */
.menutest {background: #191919 url(img/nav.gif);}
.menutest a {
	background: #191919 url(img/nav.gif);
}
/* footer */
.footer {
	background: #191919;
	border-top: 1px solid #444;
	color: #999;
	padding: 3% 3% 1%;
}
.footer ul {
	border-top: 1px solid #262626;
	margin: 0;
}
.footer li {
	border-bottom: 1px solid #262626;
	list-style: none;
}
.footer li a {
	display: block;
	line-height: 2em;
	padding-left: 4%;
	width: 96%;
}
.footer a {color: #666;}
.footer a:hover {
	color: #BBB;
	background: #222;
}

.col3,.col3center {
	float: left;
	width: 31%;
}
.col3center {margin: 0 3%;}
/* Fix Shoutbox Position on Index Page */
.index-page .footer {
    clear: both;
    display: block;
    margin-top: 90px;
    padding-top: 20px;
}

/* Shoutbox Container */
.shoutbox-container {
	margin-top: 20px;
	background-color: #222;
	padding: 10px;
	border-radius: 10px;
	color: #fff;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Shout Form Layout */
#shout_formx {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	box-sizing: border-box;
}

/* Align the color input and color picker button */
#color-picker-container {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10px;
}

#color-picker-container input[type="text"] {
	width: 100px; /* Fixed width for color input */
	margin-right: 10px;
}

/* Message container styling */
.message-container {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.message-container input[type="text"] {
	width: calc(85% - 10px); /* Adjust to make message input wider */
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	background-color: #333;
	color: #fff;
	box-sizing: border-box;
}

.message-container input[type="submit"] {
	padding: 10px 20px;
	background-color: #28a745;
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	width: calc(15% - 10px); /* Adjust button size */
}

.message-container input[type="submit"]:hover {
	background-color: #218838;
}

#shouts {
	max-height: 200px;
	overflow-y: auto;
	background-color: #222;
	padding: 10px;
	border-radius: 10px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #444;
}

#shouts::-webkit-scrollbar {
	width: 8px;
}

#shouts::-webkit-scrollbar-thumb {
	background-color: #666;
	border-radius: 10px;
}

#shouts::-webkit-scrollbar-track {
	background-color: #333;
}
/* bottom */
.bottom {
	color: #666;
	clear: both;
	font-size: 1.1em;
}
.bottom a {color: #888;}

/* Pagination */

.pagination{
padding: 2px;
}

.pagination ul{
margin: 0;
padding: 0;
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}

.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #333;
text-decoration: none; 
	color: #BBB;
	background: #222;

}

.pagination a:hover, .pagination a:active{
border: 1px solid white;
	color: #BBB;
	background: #222;
}

.pagination a.currentpage{
background-color: #2e6ab1;
color: #FFF !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}

.pagination a.disablelink, .pagination a.disablelink:hover{
color: #929292;
font-weight: normal !important;
}

.pagination a.prevnext{
font-weight: bold;
}

.toggle {display: none; margin: 0px; padding: 0px;}  
.toggle A { text-decoration: none; }


/* Server List Specific Styles */
.server-list {
    margin: 20px;
}

.server-list details {
    margin-bottom: 15px;
    background-color: #1c1c1c;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #333;
    width: auto;
}

.server-list summary {
    font-size: 1.2em;
    font-weight: bold;
    color: #ccc;
    cursor: pointer;
    padding: 5px;
    background-color: #222;
    border-radius: 3px;
    margin-bottom: 5px;
}

.server-list summary:hover {
    background-color: #333;
}

.server-list details[open] summary {
    background-color: #282828;
}

.server-list details p {
    margin: 10px 0;
    padding: 10px;
    background-color: #333;
    border: 1px solid #444;
    border-radius: 5px;
    color: #bbb;
}
.index-page .index-content {
    margin-bottom: 60px; /* Add more space between the news and the shoutbox */
}