.guidebook_menu {
	overflow: hidden;
	text-align: center;
	width: 151px;
	float: left;
}

.guidebook_menu button {
	display: block;
	background: rgba(25,25,25,0.95);
	cursor: pointer;
	width: 100%;
	height: 40px;
	font-size: 18px;
	text-transform: uppercase;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 600;
	color: #ffffff;
	border: 0px;
	border-bottom: 4px solid rgba(15,15,15,0.95);;
}

.guidebook_menu button:is(:last-child) {
	border-bottom: none;
}

.guidebook_menu button:hover {
	background: rgba(45,45,45,0.95);
}

.menulinks {
	text-align: left;
	padding-left: 15px;
	font-weight: 600;
	font-size: 13px;
	color: #6f99bb;
	display: none;
}

.menulinks a:hover {
	text-decoration: underline;
}

.realmlinks {
	border-left: 2px solid #6f99bb;
	padding-left: 5px;
	margin-left: 5px;
	color: #fff;
}

.submenulinks {
	border-left: 2px solid #6f99bb;
	padding-left: 5px;
	margin-left: 20px;
	color: #fff;
}

.lorecontent {
	margin: 8px;
	border: 1px solid #232323;
}

.menutable {
	vertical-align: top;
	border-right: 2px solid #e5e5e5;
}

.pages {
	text-align: center;
}

.pages button {
	background: /*rgba(25,25,25,0.95)*/ transparent;
	cursor: pointer;
	border: none;
	font: normal 13px tahoma,helvetica,arial,sans-serif;
}

.pages button.active {
	background: rgba(45,45,45,0.95);
}

.pages button:hover {
	background: rgba(45,45,45,0.95);
}

.pagecontent {
	display: none;
	width: 100%;
	height: 100%;
	float: left;
}

.spoilertitle {
	display: inline-flex;
}

.crossroadsbutton { /*Crossroads Button*/
	background: #0f0f0f;
    border-color: #724484;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #724484;
    text-shadow: none;
}

.crossroadsbutton:hover {
	background: rgba(45,45,45,0.95);
	color: #724484;
}

.crossroadsminibutton { /*Crossroads Mini Button*/
	background: #0f0f0f;
    border-color: #724484;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #724484;
    text-shadow: none;
	transform: translatex(50%);
}

.crossroadsminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #724484;
}

.reniabutton { /*Renia Button*/
	background: #0f0f0f;
    border-color: #BBCAB1;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #BBCAB1;
    text-shadow: none;
}

.reniabutton:hover {
	background: rgba(45,45,45,0.95);
	color: #BBCAB1;
}

.reniaminibutton { /*Renia Mini Button*/
	background: #0f0f0f;
    border-color: #BBCAB1;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #BBCAB1;
    text-shadow: none;
	transform: translatex(50%);
}

.reniaminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #BBCAB1;
}

.fullscreenclick img {
	transition: transform 0.25s ease;
	cursor: zoom-in;
}

.fullscreenclick img.zoomed {
	cursor: zoom-out;
}


.pyrruxbutton { /*Pyrrux Button*/
	background: #0f0f0f;
    border-color: #508b52;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #508b52;
    text-shadow: none;
}

.pyrruxbutton:hover {
	background: rgba(45,45,45,0.95);
	color: #508b52;
}

.pyrruxminibutton { /*Pyrrux Mini Button*/
	background: #0f0f0f;
    border-color: #508b52;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #508b52;
    text-shadow: none;
	transform: translatex(50%);
}

.pyrruxminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #508b52;
}

.cydfodolbutton { /*Cydfodol Button*/
	background: #0f0f0f;
    border-color: #c48e9d;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #c48e9d;
    text-shadow: none;
}

.cydfodolbutton:hover {
	background: rgba(45,45,45,0.95);
	color: #c48e9d;
}

.cydfodolminibutton { /*Cydfodol Mini Button*/
	background: #0f0f0f;
    border-color: #c48e9d;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #c48e9d;
    text-shadow: none;
	transform: translatex(50%);
}

.cydfodolminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #c48e9d;
}

.astennubutton { /*Astennu Button*/
	background: #0f0f0f;
    border-color: #724484;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #724484;
    text-shadow: none;
}

.astennubutton:hover {
	background: rgba(45,45,45,0.95);
	color: #724484;
}

.astennuminibutton { /*Astennu Mini Button*/
	background: #0f0f0f;
    border-color: #724484;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #724484;
    text-shadow: none;
	transform: translatex(50%);
}

.astennuminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #724484;
}

.aelunicabutton { /*Aelunica Button*/
	background: #0f0f0f;
    border-color: #FFCD00;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #FFCD00;
    text-shadow: none;
}

.aelunicabutton:hover {
	background: rgba(45,45,45,0.95);
	color: #FFCD00;
}

.aelunicaminibutton { /*Aelunica Mini Button*/
	background: #0f0f0f;
    border-color: #FFCD00;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #FFCD00;
    text-shadow: none;
	transform: translatex(50%);
}

.aelunicaminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #FFCD00;
}

.drakinirbutton { /*Drakinir Button*/
	background: #0f0f0f;
    border-color: #008080;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #008080;
    text-shadow: none;
}

.drakinirbutton:hover {
	background: rgba(45,45,45,0.95);
	color: #008080;
}

.drakinirminibutton { /*Drakinir Mini Button*/
	background: #0f0f0f;
    border-color: #008080;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #008080;
    text-shadow: none;
	transform: translatex(50%);
}

.drakinirminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #008080;
}

.sauriabutton {
	background: #0f0f0f;
    border-color: #ba8443;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #ba8443;
    text-shadow: none;
}

.sauriabutton:hover {
	background: rgba(45,45,45,0.95);
	color: #ba8443;
}

.sauriaminibutton {
	background: #0f0f0f;
    border-color: #ba8443;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #ba8443;
    text-shadow: none;
	transform: translatex(50%);
}

.sauriaminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #ba8443;
}

.nullbutton {
	background: #0f0f0f;
    border-color: #1D1387;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #1D1387;
    text-shadow: none;
}

.nullbutton:hover {
	background: rgba(45,45,45,0.95);
	color: #1D1387;
}

.nullminibutton {
	background: #0f0f0f;
    border-color: #1D1387;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #1D1387;
    text-shadow: none;
	transform: translatex(50%);
}

.nullminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #1D1387;
}

.endlessbutton {
	background: #0f0f0f;
    border-color: #3f9371;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #3f9371;
    text-shadow: none;
}

.endlessbutton:hover {
	background: rgba(45,45,45,0.95);
	color: #3f9371;
}

.endlessminibutton {
	background: #0f0f0f;
    border-color: #3f9371;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #3f9371;
    text-shadow: none;
	transform: translatex(50%);
}

.endlessminibutton:hover {
	background: rgba(45,45,45,0.95);
	color: #3f9371;
}





/* -------------------------------- HEATHERS WIP CSS WORK -------------------------------- */


/* DIV THAT GOES AROUND EVERYTHING */

.gbmain {
	background: transparent;
}

/* NON-LORE SPOILER */
.genminibutton {
	background: transparent;
    width: 100%;
    font-size: 16px;
    font-family: serif;
    font-weight: bold;
    color: #8f918d;
	letter-spacing: 2px;
	text-decoration: underline solid #3f6583;
	text-underline-offset: 5px; 
	margin-bottom: 5px;
	padding: 10px;
	border: none;
	text-transform: uppercase;
	display: flex;
  	align-items: left;
  	justify-content: space-between;
	transition: 0.3s;	
}

.genminibutton::after {
	content: "+";
	margin-left: auto;
	text-decoration: underline solid #0e0e0e;
	color: #8f918d;
	border: 1px solid #8f918d;
	padding: 0px 15px 0px 15px;
	background: transparent;
	border-radius: 2px;
	letter-spacing: 0px;
	transition: 0.3s;	
}

.genminibutton:hover {
	background: transparent;
	color: #3f6583;
}

.spoiler_content {
	background: transparent;
	padding: 10px 15px 15px 15px;
	margin-left: auto;
  	margin-right: auto;
}


/* ------ LINKS ------ */

/* fixed the jump-to problem but unsure if it will cause other problems because it is red? LOL */
:target {
	scroll-margin-top: 100px;
}

/* main link BLUE border no bg */
.mlink1 {
	background: transparent;
	border: 1px solid #3f6583;
	display: inline-block;
	width: 140px;
	padding: 10px;
	margin-left: 10px;
	border-radius: 5px;
	font-size: 9px;
	font-weight: lighter;
	letter-spacing: 2px;
}

/* jumpto link buttons */
.jtlink {
	background: transparent; 
	margin: 5px;
	vertical-align: middle;
	padding: 5px 10px 5px 10px; 
	border-radius: 2px; 
	font-size: 9px; 
	font-weight: lighter; 
	letter-spacing: 2px;
	color: #ccc !important;
	border-bottom: 2px solid #374b5c;
	text-transform: uppercase;
	text-align: center;
	transition: 0.3s;
}

 .jtlink:hover {
  	background-color: #374b5c;
	border-radius: 2px; 
	border-bottom: 2px solid #2c2e30;
	cursor: pointer;
}

/* jump to the top button for very bottom of page */
.jtopbig {
	background: transparent; 
	margin: 5px;
	vertical-align: middle;
	padding: 5px 20px 5px 20px; 
	border-radius: 8px; 
	font-size: 8px; 
	font-weight: lighter; 
	letter-spacing: 5px;
	color:#cccccc !important;
	border: 2px solid #374b5c;
	text-transform: uppercase;
	text-align: center;
	transition: 0.3s;	
}

.jtopbig:hover {
  	background-color: #2c2e30;
  	color: #fff;
	border: 2px solid #374b5c;
	cursor: pointer;
}

/* jump to the top button for each section */
.jtopsmall {
	background: transparent; 
	background-image: url(https://i.imgur.com/Y52GpBc.png);
	background-repeat: no-repeat;
	background-position: center;
	float: right;
	padding: 10px;
	vertical-align: middle;
	transition: 0.3s;	
}

.jtopsmall:hover {
	background-image: url(https://i.imgur.com/fehZncj.png);
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

/* word only links GRAY-BLUE 79817e*/
.txtlink {
	font-weight: bold;
	text-transform: uppercase;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.txtlink:hover {
	color: #467194 !important;
}

.txtlink2 {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.txtlink2:hover {
	color: #467194 !important;
}


/* ------ ALL WORLD-SPECIFIC LINK CLASSES BENEATH HERE ------ */

/* active worlds */
.crossroadslink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.crossroadslink:hover {
	color: #724484 !important;
}

.renialink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.renialink:hover {
	color: #BBCAB1 !important;
}

.pyrruxlink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.pyrruxlink:hover {
	color: #508b52 !important;
}

.cydfodollink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.cydfodollink:hover {
	color: #c48e9d !important;
}

.astennulink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.astennulink:hover {
	color: #298f85 !important;
}

/* background worlds */
.drakinirlink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.drakinirlink:hover {
	color: #008080 !important;
}

.melasurelink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.melasurelink:hover {
	color: #887e76 !important;
}

.aleunicalink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.aleunicalink:hover {
	color: #FFCD00 !important;
}

.saurialink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.saurialink:hover {
	color: #ba8443 !important;
}

.nulllink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.nulllink:hover {
	color: #342b93 !important;
}

.endlessgreenlink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.endlessgreenlink:hover {
	color: #3f9371 !important;
}

.icrulanlink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.icrulanlink:hover {
	color: #C70039 !important;
}

.evinethallink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.evinethallink:hover {
	color: #3dcea3 !important;
}

.marixlink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.marixlink:hover {
	color: #6f3333 !important;
}

.aetherialink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.aetherialink:hover {
	color: #d3c0e9 !important;
}

.yadakolink {
	font-weight: bold;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	transition: 0.3s;
	color: #6c7885 !important;
	letter-spacing:1.5px;
}

.yadakolink:hover {
	color: #461975 !important;
}



/* ------ ALL DIV CLASSES BENEATH HERE ------ */

/* spacing div */
.spacediv {
	background: transparent;
	padding: 0px 50px 0px 50px;
}

/* nix's |text here| div */
.txtdiv {
	color: #b5b5b5;
	border-left: 1px solid #313131;
	border-right: 1px solid #313131;
	padding: 10px 15px 10px 15px;
	width:85%;
	text-align: justify;
}

/* smaller box div for indenting */
.sbdiv {
	background: transparent;
	width:85%;
	padding: 5px;
	text-align: justify;
}

/* long vertical line for spacing between links in columns, must inline place height & margins to fit specific instances */
.vline {
	border-left: 1px solid #2c2e30; 
}


/* ------ HEADERS ------ */

/* gray page-width header no text */
.tborder h1 {
	margin: 0;
	margin-top: -10px;
	background-color: #2c2e30; 
	padding: 10px; 
	border-radius: 2px;
}

/* text header over top columns BLUE "roleplay tips" "magic guide" etc */
.gbmain h2 {
	font-size: 25px;
	color: #6f99bb;
	font-weight: lighter;
	letter-spacing: 5px;
	font-family: serif;
	margin: 0px;
	text-transform: uppercase;
}

/* main header BLUE, inline style to change bg color */
.gbmain h4 {
	background-color: #3f6583; 
	width: 225px; 
	padding: 5px; 
	font-size: 10px; 
	font-weight: lighter; 
	text-shadow: 1px 1px 1px #000; 
	letter-spacing: 5px; 
	border-radius: 2px;
	text-transform: uppercase;
	text-align: center;
}

/* secondary smaller header -blue- no text, LEFT sidebar, spacing may be off if used elsewhere */
.gbmain h5 {
	background-color: #3f6583;
	width: 125px;
	padding: 5px;
	margin-top: 25px;
	margin-bottom: 25px;
	margin-left: 10px;
	border-radius: 2px;
}

/* a basic smaller text header */
.gbmain h6 {
	background-color: transparent;
	padding: 5px;
	margin: 2px;
	color: #4d80a6;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 2px;
	text-shadow: 1px 1px 1px #000;
}

/* ------ ALL SPAN CLASSES BENEATH HERE ------ */

/* vocab word */
.vocab {
	background: transparent;
	color: #916b5b;
	font-weight: bold;
	font-variant-caps: all-small-caps;
	letter-spacing: 1px;
}

/* first line accent BLUE */
.flaccent1 {
	color: #4d80a6;
	font-weight:bold;
	font-variant-caps: all-small-caps;
	letter-spacing:1px;
}

/* line accent GRAY */
.flaccent2 {
	color: #5c6064;
	font-weight:bold;
	font-variant-caps: all-small-caps;
	letter-spacing:1px;
}

/* line accent GRAY no bold */
.flaccent3 {
	color: #5c6064;
	font-weight: lighter;
	font-size: 12px;
	font-family: tahoma;
}

/* line accent no color code */
.flaccent4 {
	font-weight:lighter;
	font-variant-caps: all-small-caps;
	letter-spacing:1px;
}

/* consider this/example main font blue */
.ctmain1 {
	color: #597a96;
	font-size: 16px;
	letter-spacing: 5px;
}

/* consider this/example sub font */
.ctsub {
	font-size: 9px;
	padding-left: 30px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* paragraph below h2 header */
.headpar {
	font-weight: lighter;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 0px 50px 0px 50px;
}

/* sub font for centering beneath H4/H5 headers */
.hsub {
	display: inline-block;
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding-bottom: 5px;
	color: #5c6064;
}

/* achievement section titles */
.achtitle {
	color: #4d80a6;
	font-weight:lighter;
	font-family: serif;
	letter-spacing:1px;
	font-size: 20px;
	text-transform: lowercase;
	text-decoration: underline;
	text-decoration-color: #5c6064;
	text-underline-offset: 5px; 
}

/* ------ MISC STUFF ------ */

/*  dotted HR */
.dothr {
	background: transparent;
	border-top: 1px dashed #282a2c;
	height: 0;
}