html {
  overflow-y: scroll;
}

body {
  overflow-x: auto;
  margin: 0;
  padding: 0;
  background-color: #000000;
  background-image: url("images/frame/TileBig.png");
  background-position: center top;
  background-repeat: repeat-y;
}

#MainCenter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#Main {
  display: flex;
  flex-direction: row;
  width: 1000px;
  height: 100%;
}

/* ======================================================================= */
/* NAVIGATION FRAME STYLES */
/* START */
/* ======================================================================= */

#NavFlex {
  max-width: 200px
  min-width: 200px;
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100%;
}

#NavImageBox {
  flex-basis: 283px;
  width: 200px;
}

div.NavImageDisplay {
  width: 200px;
  height: 283px;
  background-repeat: no-repeat;
  background-color: #000000;
  background-align: top;
}

#NavImageFrame {
  width: 200px;
  height: 283px;
  background-image: url("images/frame/NavImageFrame.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-align: top;  
}

/* ======================================================================= */
/* NAVIGATION IMAGE STYLES */
/* START */
/* ======================================================================= */

#NavImage_Home {
  background-image: url("images/slide/Home.png");
}

#NavImage_Guidelines {
  background-image: url("images/slide/Guidelines.png");
}

#NavImage_Timeline {
  background-image: url("images/slide/Timeline.png");
}

#NavImage_Regions {
  background-image: url("images/slide/Regions.png");
}

#NavImage_Guilds {
  background-image: url("images/slide/Guilds.png");
}

/* ======================================================================= */
/* NAVIGATION IMAGE STYLES */
/* START */
/* ======================================================================= */


#NavBtnFrame {
  display: flex;
  flex-direction: column;
  flex: auto;
  width: 200px;
  background-image: url("images/frame/NavBG.png");
  background-color: transparent;
  background-align: top;  
}

#FrameNavBoxTop {
  flex-basis: 40px;
  width: 200px;
  background-image: url("images/frame/NavTop.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-align: top;
}

#NavBtnList {
  x-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: auto;
  width: 200px;
  margin-left: 20px;
  margin-right: 20px;
}

#FrameNavBoxBottom {
  flex-basis: 40px;
  width: 200px;
  background-image: url("images/frame/NavBottom.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: bottom;
}

#NavTrailer {
  flex-basis: 134px;
  width: 200px;
  background-image: url("images/frame/NavTrailer.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: top left;
}

/* ======================================================================= */
/* NAVIGATION FRAME STYLES */
/* END */
/* ======================================================================= */

/* ======================================================================= */
/* MAIN NAVIGATION BUTTON STYLES */
/* START */
/* ======================================================================= */

a.btnLarge {
  display: flex;
  flex-direction: column;
  flex: auto;
  flex-basis: 50px;
  width: 160px;
  padding-bottom: 5px; 
}

a.btnSmall {
  flex: auto;
  flex-basis: 25px;
  width: 140px;
  padding-left: 20px;
  padding-bottom: 5px;
}

div.btnLarge {
  width: 160px;
  height: 50px;
  background-repeat: no-repeat;
  background-color: transparent;
}

div.btnSmall {
  width: 140px;
  height: 25px;
  background-repeat: no-repeat;
  background-color: transparent;
}

#btnHome {
  background-image: url("images/button/btnHome.png");
}

#btnGuidelines {
  background-image: url("images/button/btnGuidelines.png");
}

#btnTimeline {
  background-image: url("images/button/btnTimeline.png");
}

#btnRegions {
  background-image: url("images/button/btnRegions.png");
}

#btnGuilds {
  background-image: url("images/button/btnGuilds.png");
}

/* ======================================================================= */
/* MAIN NAVIGATION BUTTON STYLES */
/* END */
/* ======================================================================= */

/* ======================================================================= */
/* GUIDELINES NAVIGATION BUTTON STYLES */
/* START */
/* ======================================================================= */

#btnHouseRules {
  background-image: url("images/button/btnHouseRules.png");
}

#btnRaces {
  background-image: url("images/button/btnRaces.png");
}

#btnClasses {
  background-image: url("images/button/btnClasses.png");
}

#btnBackgrounds {
  background-image: url("images/button/btnBackgrounds.png");
}

#btnGods {
  background-image: url("images/button/btnGods.png");
}

#btnLevias {
  background-image: url("images/button/btnLevias.png");
}

#btnNem {
  background-image: url("images/button/btnNem.png");
}

#btnSephra {
  background-image: url("images/button/btnSephra.png");
}

/* ======================================================================= */
/* GUIDELINES NAVIGATION BUTTON STYLES */
/* END */
/* ======================================================================= */

/* ======================================================================= */
/* REGION NAVIGATION BUTTON STYLES */
/* START */
/* ======================================================================= */

#btnAndromeda {
  background-image: url("images/button/btnAndromeda.png");
}

#btnBelendar {
  background-image: url("images/button/btnBelendar.png");
}

#btnDoro {
  background-image: url("images/button/btnDoro.png");
}

#btnDrastfel {
  background-image: url("images/button/btnDrastfel.png");
}

#btnGreystone {
  background-image: url("images/button/btnGreystone.png");
}

#btnLevias {
  background-image: url("images/button/btnLevias.png");
}

#btnNem {
  background-image: url("images/button/btnNem.png");
}

#btnSephra {
  background-image: url("images/button/btnSephra.png");
}

/* ======================================================================= */
/* REGION NAVIGATION BUTTON STYLES */
/* END */
/* ======================================================================= */

#FullContentFlex {
  max-width: 800px;
  min-width: 400px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: auto;
}

/* ======================================================================= */
/* BANNER AREA STYLES */
/* START */
/* ======================================================================= */

#BannerArea {
  position: relative;
  flex-basis: 150px;
  width: 100%;
  background-image: url("images/frame/BannerCTR.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: right top;
}

#BannerImage {
  position: relative;
  x-index: 1;
  width: 100%;  
  height: 100%;
  background-image: url("images/frame/Banner.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: left center;
}

#BannerOverlay {
  position: relative;
  x-index: 2;
  width: 100%;  
  height: 100%;
  background-image: url("images/frame/Smoke.png");
  background-repeat: repeat;
  background-color: transparent;
  background-position: left center;
}

/* ======================================================================= */
/* BANNER AREA STYLES */
/* END */
/* ======================================================================= */

#ContentHeaderWrapper {
  position: relative;
  flex-basis: 80px;
  width: 100%;
  background-image: url("images/frame/CornerCTL.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: left top;
}

#ContentHeader {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 20px;
  background-image: url("images/frame/CornerCTR.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: right top;
}

#ContentBlock {
  position: relative;
  flex: auto;
  margin-left: 10px;
}

span.MainHeader {
  font-size: 40px;
  font-weight: bold;
}

span.SubHeader {
  font-size: 25px;
  font-weight: bold;
}

p {
  margin-block-start: 0;
  font-family: Palatino;
  font-size: 20px;
  word-wrap: break-word;
}

span.RegionVerb {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

p.Center {
  text-align: center;
}

span.Bold {
  font-weight: bold;
}

span.Adjective {
  color: #0000DD;
  font-weight: bold;
}

span.Noun {
  color: #117711;
  font-weight: bold;
}
div.PageBlock {
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-botom: 10px;
  background-image: url("images/frame/Translucent.png");
  background-repeat: repeat;
  text-align: left;
  vertical-align: text-top;
}

div.RegionBlock {
  position: relative;
  width: 100%;
  min-height: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
}

div.Split{
  display: flex;
  width: 100%;
}

div.RegionDesc {
  float: right;
  width: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 5px;
  margin-right: 5px;
}

a.thumb {
  width: 200px;
  height: 150px;
}

div.thumb {
  float: left;
  width: 200px;
  height: 150px;
  background-repeat: no-repeat;
}

/* ======================================================================= */
/* REGION MAP THUMBNAIL STYLES */
/* START */
/* ======================================================================= */

#MapLevias {
  background-image: url("images/maps/thumb/Levias.jpg");
}

#MapOldtown {
  background-image: url("images/maps/thumb/Oldtown.jpg");
}

#MapPortSiren {
  background-image: url("images/maps/thumb/PortSiren.jpg");
}

/* ======================================================================= */
/* MAP THUMBNAIL STYLES */
/* END */
/* ======================================================================= */

/* ======================================================================= */
/* OTHER IMAGE STYLES */
/* START */
/* ======================================================================= */

div.TallImageCenter {
  width: 100%
  height: 300px;
  background-position: top center;
  background-repeat: no-repeat;
}

div.TallImageRight {
  display: in-line;
  float: right;
  width: 230px;
  height: 300px;
  background-position: top right;
  background-repeat: no-repeat;
}
div.WideImageCenter {
  width: 100%;
  min-width: 300px;
  height: 230px;
  background-position: top center;
  background-repeat: no-repeat;
}

#ImageXera {
  background-image: url("images/Xera.png");
}

#ImageBook {
  background-image: url("images/Book.png");
}

#ImageTime {
  background-image: url("images/Time.png");
}

#ImageLand {
  background-image: url("images/Land.png");
}

#ImageGuilds {
  background-image: url("images/Guilds.png");
}

#ImageOldtown {
  background-image: url("images/Oldtown.png");
}

#ImagePortSiren {
  background-image: url("images/PortSiren.png");
}

/* ======================================================================= */
/* OTHER IMAGE STYLES */
/* END */
/* ======================================================================= */