:root {
	--main-text-color:#c8eadd;
	--secondary-text-color:#59BFA0;/**link hover, styled text, h3**/
	--main-link-color: #F7F7F7;
	--main-bg-color:#022C2A;
	--secondary-bg-color: rgba(89, 191, 160, 0.8); /**OTY, buttons; manually change main menu and thead**/
	--accent-color: hsl(177, 91%, 12%); /**button borders, trow2**/
	--dark-accent-color: rgba(1, 20, 19, 0.8); /**OTY, tcat, borders, trow selected**/
}

body {
	background: var(--dark-accent-color) url(https://beqanna.com/images/banners/Version24.png) top center no-repeat fixed;
	background-size: cover;
	color: var(--main-text-color);
}

a,
.styled_text,
.thead {
	color: var(--main-link-color);
	text-shadow: 1px 1px 3px #000;
}

a:hover {
	color: var(--secondary-text-color);
}

img.attachment {
	border: 1px solid #000;
}

hr {
	background-color: var(--secondary-bg-color);
	color: var(--secondary-bg-color);
	height: 1px;
	border: 0px;
}

h1, h2 {
	text-shadow: 1px 1px 3px #000;
    color: var(--main-link-color);
}

h3 {
	color: var(--secondary-text-color);
}

/******************** MAIN MENU ***********************/
#main_menu {
	background: rgba(89, 191, 160, 0.9);
}

#main_menu a {
	font-size: 16px; 
	letter-spacing: 3px;
}

#main_menu a:hover {
	color: var(--main-bg-color);
}

#secondary_menu {
	background: var(--main-bg-color);
}

nav ul ul { /**main-menu drop-down**/
	background: var(--secondary-text-color);;
}

/******************** BQ NAME AND VERSION ***********************/

#bq_name {
	font: 86px 'Cinzel', serif; 
	text-shadow: 3px 2px 2px var(--main-bg-color);
        top: 20px;
}

#bq_name::after {
	content: 'Version 24: The Discovery';
        left: 200px;
}

/******************** PM NOTICES AND OOC HEADER BOX ***********************/

#ooc_headerbox {
	background: var(--main-bg-color);
}

#ooc_headerbox .font_color {
	color: var(--main-link-color);
}

#ooc_headerbox .second_font_color {
	color: var(--secondary-text-color);
}

.oty {
	background: var(--dark-accent-color);
}

.oty_circle {
	background: var(--secondary-bg-color);
	border: 1px solid #000;
}

.pm_alert {
	text-align: center; 
	background: var(--main-bg-color);
}


/******************** BREADCRUMBS ***********************/

.navigation {
	background: var(--dark-accent-color);
}

/******************** PAGE FOOTER ***********************/

#footer {
	background: var(--main-bg-color);
}

#footer .menu {
	text-align: center; 

}

/******************** MAIN PAGE FORUM STYLING ***********************/
.tborder {
	border: 10px solid var(--main-bg-color);
}

.thead {
	background: rgba(89, 191, 160, 0.5);
	border: 1px solid var(--dark-accent-color);
}

.forum {
	background: var(--accent-color);
	border: 1px solid var(--dark-accent-color);
	box-shadow:
		1.8px 1.8px 1.9px rgba(0, 0, 0, 0.028),
		4.3px 4.3px 4.6px rgba(0, 0, 0, 0.04),
		8px 8px 8.6px rgba(0, 0, 0, 0.05),
		14.3px 14.3px 15.4px rgba(0, 0, 0, 0.06),
		26.7px 26.7px 28.8px rgba(0, 0, 0, 0.072),
		64px 64px 69px rgba(0, 0, 0, 0.1);
}

/*** Forum Name Above Double Lines ***/

.forum_section {
	text-align: center;
}

.forum_section > a:first-child {
	font-size: 22px; 
}

.forum_section_border {
	border-bottom: 4px double var(--secondary-text-color);
}

/*** Forum Icon Indicators ***/

.forum_on::after {
	background: rgb(89,191,160);
	background: linear-gradient(180deg, rgba(89,191,160,1) 0%, rgba(1,20,19,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#423a4b",endColorstr="#806a8a",GradientType=1);
}

/*** Subforum Styles ***/

.subforums a {
	font-size: 16px;
}

/*** Subforum Icon Indicators ***/

.subforumicon {
	background: url(../../../images/mini_status_sprite.png) no-repeat 0 0;
}

/*** OOC Section Styling ***/

#cat_24_e .subforums {
	text-align: left;
}

/******************** FORUM BOARDS & POSTS STYLING ***********************/

.tcat {
	background: var(--dark-accent-color);
	border-bottom: 1px solid var(--main-bg-color);
	color: var(--secondary-text-color);
}

.tcat a:hover {
	color: var(--secondary-text-color); 
}

.trow1,
.trow_shaded,
.tfoot {
	background: var(--main-bg-color);
}

.trow2 {
	background: var(--accent-color);
}

.trow_deleted {
	background: var(--dark-accent-color);
}

.trow_selected,
tr.trow_selected td {
	background: var(--dark-accent-color);
}

.trow_sep { /**forum announcements and normal threads headers**/
	background: var(secondary-bg-color);
}

.tfoot {
	border-top: 1px solid var(--dark-accent-color);
}


/******************** INPUTS, BUTTONS, FORMS ***********************/

 input.textbox,
 select {
	border: 1px solid #000;
}

fieldset {
	border: 1px solid #000;
}

fieldset.align_right {
	text-align: right;
}

input.textbox,
textarea,
select {
	background: #ffffff;
	color: var(--main-bg-color);
	border: 1px solid var(--dark-accent-color);
}

button,
input.button {
	background: var(--secondary-bg-color);
	border:none;
    border-top: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
}

button:hover,
input.button:hover {
    color: var(--secondary-bg-color);
    border-color: var(--dark-accent-color);
}

input.error, textarea.error, select.error {
	border: 1px solid #f30;
	color: #f30;
}

input.valid, textarea.valid, select.valid {
	border: 1px solid #0c0;
}

label.error {
	color: #f30;
	font-weight: bold;
	font-size: 11px;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #000;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #000;
}

.post .editor_control_bar {
	background: #f5f5f5;
}

.popup_menu,
.popup_menu .popup_item {
	background: var(--main-bg-color);
}

.popup_menu {
	border: 1px solid #000;
}

.popup_menu .popup_item:hover {
	color: #fff;
}

.popup_menu .popup_item_container {
	text-align: left;
}

.selectall {
	background: #FFFBD9;
	border-bottom: 1px solid #F7E86A;
	color: #333;
	text-align: center;
}

blockquote {
	border: 1px solid var(--main-bg-color);
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid var(--main-bg-color);
	font-style: normal;
}

blockquote cite > span {
	font-weight: normal;
}

blockquote cite span.highlight {
	font-weight: bold;
}

.codeblock {
	background: #fff;
	border: 1px solid #000;
	color: #000;
}

.codeblock .title {
	border-bottom: 1px solid #000;
	font-weight: bold;
	margin: 0 0 10px 0;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	font-size: 11px;
}

.red_alert a {
	color: #A5161A;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

.imminent_banned {
	color: #880000;
}

.high_banned {
	color: #FF0000;
}

.moderate_banned {
	color: #FF6600;
}

.low_banned {
	color: #008000;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

div.error {
	border: 2px solid #FFD324;
	background: #FFF6BF;
}

div.error p {
	color: #333;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	color: #C00;
	background: url(../../../images/error.png) no-repeat 0;
}

/******************** LEGENDS ***********************/

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
}

/******************** POSTS ***********************/

/** deleted posts inside threads **/

.deleted_post_collapsed {
	background: var(--main-bg-color);
	border-top: 3px solid var(--dark-accent-color);
}

/*** Postbit ***/

.post_author {
	border-bottom: 1px solid var(--dark-accent-color);
	border-top: 2px solid var(--dark-accent-color);
	background: var(--accent-color);
}

.post_author:first-child {
	border-top: none;
}

.post_author .custom_user_title {
	text-shadow: 0px 1px #000;
	color: var(--main-link-color);
}

.author_statistics {
	background: var(--secondary-bg-color);
	border-radius: 20px;
	border-left: 2px solid var(--main-bg-color);
	border-right: 2px solid var(--main-bg-color);
	color: var(--main-bg-color);
}

.quote {
	font-style: italic;
	color: var(--main-link-color);
	margin: 0 10px 5px 10px;
}

.miniprofile-container {
	text-align: center;
}

.miniprofile-back {
	background: rgba(89, 191, 160, 1); /** secondary-bq-color without opacity**/
	border-radius: 20px;
	border-left: 2px solid var(--main-bg-color);
}

/** Post Classic **/
.post.classic .post_author {
	text-align: center;
}

.post.classic ul.postbit_flex li {
	text-align: left;
}

/** Post Top **/

.post .post_head {
	border-bottom: 1px dotted #ddd;
}

.post .post_head span.edited_post {
	font-size: 10px;
}

/** Post Body **/

.post_content .signature {
	border-top: 1px dotted #ddd;
}

/******* Pagination and Buttons *******/

.pagination .pagination_current,
.pagination a,
.postbit_buttons > a,
a.button {
	background: var(--secondary-bg-color);
    border-top: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    color: var(--main-bg-color); 
    text-shadow: none;
}

.pagination .pagination_current,
.pagination a:hover,
.postbit_buttons > a:hover,
a.button:hover {
    color: var(--main-link-color);
    border-color: var(--dark-accent-color);
}

.post_controls {
	border-bottom: 1px solid var(--dark-accent-color);
}

/** PostBit Buttons - found at bottom of post to edit, delete, etc. ***/

.postbit_buttons a span {
	background-image: url(../../../images/buttons_sprite.png);
	background-repeat: no-repeat;
}

/** Link Buttons - New Reply, etc. ***/ 
a.button span {
	background-image: url(../../../images/buttons_sprite.png);
	background-repeat: no-repeat;
}

.quick_jump {
	background: url(../../../images/jump.png) no-repeat 0;
	border: none;
}

.pollbar {
	background: url(../../../images/pollbar.png) top left repeat-x;
	border: 1px solid #3f3f3f;
}

/******************** MEMBERLIST ***********************/

.memberlist {
	background: var(--accent-color);
	box-shadow:
		1.8px 1.8px 1.9px rgba(0, 0, 0, 0.028),
		4.3px 4.3px 4.6px rgba(0, 0, 0, 0.04),
		8px 8px 8.6px rgba(0, 0, 0, 0.05),
		14.3px 14.3px 15.4px rgba(0, 0, 0, 0.06),
		26.7px 26.7px 28.8px rgba(0, 0, 0, 0.072),
		64px 64px 69px rgba(0, 0, 0, 0.1);
}

.memberlist table td {
	text-align: center; 
}

/******************** PROFILES ***********************/

.profile_title {
	font: 18px 'Cinzel', serif;
	color: var(--main-text-color);
}

.profile_styled_text {
    text-decoration: none;
    font: 16px 'Mate SC', serif;
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: 1px;
    color: var(--secondary-text-color);
    text-shadow: 1px 1px 2px #000;
}

.profile_section {
    background: var(--main-bg-color); 
}

ul.tabs.profile li {
    border-radius: 5px 5px 0 0;
    background: var(--dark-accent-color);
    border-bottom: 1px solid var(--main-bg-color);
}

html ul.tabs.profile li.active, 
html ul.tabs li.active a:hover,
ul.tabs li a:hover  {
    background: var(--main-bg-color);
    color: var(--main-link-color);
}

.tab_container {
    border-top: none;
    background: var(--main-bg-color); 
}

/******************** TOOLTIPS ***********************/

/* Position tooltip above the element */
[data-tooltip]:before {
  border-radius: 3px;
  background-color: #000;
  background-color: var(--secondary-bg-color);
  color: var(--main-text-color);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/******************** GUIDE ***********************/

ul.tabs.guide li {
	list-style: none;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible,
ul.tabs.guide li {
  cursor: pointer;
  width: 100%;
  margin: 5px 0px;
  border: none;
  border-bottom: 2px solid var(--secondary-text-color);
  text-align: left;
  background-color: var(--main-bg-color);
  border-radius: 0;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible:hover,
ul.tabs.guide li a:hover {
  color: var(--secondary-text-color);
  border-bottom: 2px solid var(--main-link-color);

}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}

/******************** FF GUIDE ***********************/

.guide_header {
	border:1px solid #000;
	box-shadow:0 0 10px #000;
}

/***************************** LAND HEADER STYLING *****************************/
.rules_background {
    border: 1px solid var(--dark-accent-color);
}

.rules_description {
	background: rgba(3, 58, 56, 0.8); /**accent-color except rgba)**/
	border: 1px solid var(--dark-accent-color);
	box-shadow: 0 0 2px var(--dark-accent-color);
}


.rules_description .styled_text {
	color: var(--secondary-bg-color);
}

/******************** MISC ***********************/

/** BQ Calendar **/

.beqanna_calendar tr td {
	border-bottom: 2px solid var(--secondary-text-color);
}

/** trait genetics table **/

td .traitgenetics_square {
	border: 1px solid var(--secondary-text-color);
}

.traitgenetics_parents {
	color: var(--secondary-text-color);
	font: 16px 'Mate SC', serif;
	text-shadow: 1px 1px 3px var(--dark-accent-color);
	font-variant: small-caps;
	text-transform: lowercase;
	letter-spacing: 4px;
}

.traitgenetics_main {
	font-weight: bold;
}

.traitgenetics_express {
	color: var(--secondary-text-color);
}

/** previous layouts **/
.history_layouts_table tr td img {
	border-radius: 20px;
    border: 1px solid #000;  
}

/** Username colors **/
.beqannafairies_username {
	color:#95bbd0;
}

.officials_username {
	color:#78a2ba;
}

.magicentity_username {
	color: #ffb3b3;
}

.leader_username {
	color: #D8BFD8;
}

/** thread prefixes **/
.green_prefix {
	color:#b3ffb3;
}

.yellow_prefix {
	color:#d8a98b;
}

.red_prefix {
	color:#ff8080;
}

.purple_prefix {
	color:#ecb3ff;
}

.light_prefix {
	color: #aac5d5;
}

.dark_prefix {
	color:#456f87;
}

/***Contact Us ***/
.staff {
	background:var(--accent-color);
        height: 225px;
}

.staff img {
	height:200px;
	float: left; 
	margin: 10px; 
	display:inline-block; 
	box-shadow: 
		1.8px 1.8px 1.9px rgba(0, 0, 0, 0.028),
		4.3px 4.3px 4.6px rgba(0, 0, 0, 0.04), 
		8px 8px 8.6px rgba(0, 0, 0, 0.05), 
		14.3px 14.3px 15.4px rgba(0, 0, 0, 0.06), 
		26.7px 26.7px 28.8px rgba(0, 0, 0, 0.072), 
		64px 64px 69px rgba(0, 0, 0, 0.1);
}