/* Contents

I. Comics Formatting
    I.i Comic Pages Topbar Menu
    I.ii Landy Sidebar Settings 
        I.ii.a Landy Sidebar Screen Display Settings 
II. Comics - Mordremoth's Champion BG 
III. Mirebeast Formatting
  III.i Mirebeast Homepage Formatting 
  III.ii Mirebeast Comic Pages Formatting 


================================================== */

/* I. Comics Formatting 
================================================== */

body { background-color: #000; }

.content-comics {
	/* background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, .5), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)), url('../graphics/bg-site.jpg');
  background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 70% auto; 
  background-position: top right;  */
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: auto; 
  margin-left: auto; 
  width: 100%; 
  height: 100%; 
  position: relative; 
  padding: 10px; 
  overflow: hidden; 
  float: none; 
}

.content-comics h4 { 
  text-align: center; 
  margin: 0; 
}

.textbody-center hr { 
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); 
  height: 1px; 
}

.textbody-center {
  padding-top: 10px;
  padding-bottom: 0px;
  border-bottom: 0px solid #eee;
	margin: 0 auto;
  float: none;
  text-align: center; 
}

/* Format standard page dimensions for indivdual pages */ 
.textbody-center img {
  width: 100%; 
  max-width: 600px; 
}

/* Allow for covers or spreads to extend beyond mobile frame/beyond 600px width */ 
.textbody-center img.cover {
  width: auto; 
  max-width: none; 
}

.textbody-center a:link, .textbody-center a:visited, .textbody-center a:hover, .textbody-center a:active {
  color: inherit;  
}

/* gradient hr tag */ 
hr.solidGrey { 
  /* background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));  */
  border-color: #555555; 
  height: 1px; 
}

/* Darker hr tag */ 
hr.night { 
  border-color: #51cdff50; 
  height: 1px; 
}

/* Custom Links colors for Landy homepage */ 
#landy-links a, a:visited { 
   color: #ffa334; 
}

/* Smaller footer text for individual comic pages */
.content-comics .text-muted { 
  font-size: 0.7em; 
} 

/* Center Classes */ 
h5.center, h4.center, h3.center, h2.center { 
  text-align: center; 
  font-weight: 600; 
}

/* Center Class for paragraph with default line weight */ 
p.center { 
  text-align: center; 
}

/* Decrease header font weight */ 
h5.thin { 
  font-weight: 500; 
}

/* Increase h5 size */ 
h5 { 
  font-size: 1.75rem; 
}

/* Add padding to lists for Harbinger index page */ 
ul { 
  padding-top: 1em; 
  padding-bottom: 0.5em; 

}

/* Reduce padding when desired, such as for nested lists */ 
ul.nested { 
  padding-top: 0.25em; 
  padding-bottom: 0em; 
}

/* Left-align Classes */ 
p.left { text-align: left; }

/* Right-align Classes */ 
p.right { text-align: right; }

/* START ===== Custom styles for Landy homepage ===== */ 
.content-landy-homepage {
	background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .8), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url('../graphics/mordremoths-champion-bg.png');
  background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: auto 100vh; 
  background-position: top right; 
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 30%;
  width: 70%; 
  height: 100%; 
  min-height: /* 95vh */ 95%; 
  /* position: relative; */
  padding: 10px; 
  overflow: hidden; 
  /* float: right; */
}

.content-landy-homepage .flex-container {
  height: 100%; 
}

.content-landy-homepage .text-muted {
  font-size: 0.8em; 
}

/* Custom h4 styles for "Latest," "Recent," and Page Date updates headers on Harbinger Index */
.content-landy-homepage h4 { 
  font-size: 1.2em; 
  font-weight: 600; 
  padding-top: 1em; 
  text-align: left;
}

/* Forces the center class for h4 to work (this is not an ideal workaround */
.content-landy-homepage h4.center { 
  text-align: center;
}

/* Custom h4 styles for "Latest" and "Recent" updates headers on Harbinger Index */
.content-landy-homepage h4.header, h3.header { 
  padding-top: 0; 
}

/* Custom h3 styles for updates headers on Harbinger Index */
.content-landy-homepage h3 { 
  padding-bottom: 0.25em; 
}

/* Cover Settings | Prevents Images from scaling displeasingly in differring resolutions */
.col-xs-12 img,
.col-sm-6 img,  
.col-sm-4 img {
	width: 100%;
	height: auto;
	max-height: auto;
  min-width: 100%; 
  object-fit: cover; 
}

.backgroundNight { 
  /*background-color: #51cdff25; */
  background-image: linear-gradient(to bottom, #000, #51cdff15);
}

.backgroundDusk { 
  /*background-color: #51cdff25; */
  background-image: linear-gradient(to bottom, #000, #e6401715);
}

.backgroundMint { 
  /*background-color: #51cdff25; */
  background-image: linear-gradient(to bottom, #000, #9fb56515);
}

#menu .landy-socials-links, 
#menu.landy-socials-links:visited {
  color: #ccc; 
}

#menu .landy-socials-links:active, 
#menu .landy-socials-links:hover {
  color: #ccc; 
}

/* Add space between homepage covers and description text */
.imgIndex { margin-bottom: 1rem; }


/* Hide the page updates links when on desktop */
.showOnlyOnMobile { display: none; }

/* Add space below covers on landy index page */ 
.indexSpaceBelow { 
  margin-bottom: 3em; 
  padding: 0 0.5rem 3em 0.5rem; 
}


/* Add padding to divs for Harbinger comic index blurbs */ 
.divPadding { 
  padding: 2rem; 
}


/* END ===== Custom styles for Landy homepage ===== */ 

  /* Have images not cut off in mobile view for Landy homepage */
.content-landy-homepage img {
  max-width: 100%; 
  height: auto; 
}


/* I.i Comic Pages Topbar Menu 
================================================== */

#menu-comics {
  background-color: #000000;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 0px;
  border-bottom: 1px solid #555555; 
	line-height: 3em;
	font-size: 1.35rem;
	text-align: center;
  overflow: hidden;
  text-transform: none;
  font-weight: 100;
  position: relative; 
  width: 100%; 
}

#menu-comics ul {
  list-style:none;
  padding: 0px;
  float: none; 
  margin:0 auto;
}

#menu-comics ul li {
  display:inline-block;
  list-style:none;
  padding: 0.5em 1em 0.5em 0.5em;  
  vertical-align: top; 
}

#menu-comics li.selected {
  display:inline-block;
  font-weight: bold;
  font-size:1.2em;
  color:#ccc;
}

#menu-comics li a:link, 
#menu-comics li a:visited {
  display:inline-block;
  font-size:1.2em;
  color:#ccc;
	text-decoration: none; 
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/
    -o-transition-duration: 0.5s; /*Opera duration version*/

}

#menu-comics li a:hover, 
#menu-comics li a:active {
    color:#ccc;
	text-decoration: underline; 
	text-shadow: 0px 0px 10px #ffffff;
}

/* END Comic Pages Topbar Menu 
================================================== */





/* I.ii Landy Sidebar Settings
================================================== */

#sidebar-landy {
  background-color: #1a1e1d;
	background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 1), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../graphics/mordremoths-champion-bg-cropped.png'); 
	/* background-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, .8), rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)), url('../graphics/mordremoths-champion-bg-cropped.png'); */ 
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: auto 100%; 
    background-position: left; 
	font-size: 16px;
	font-style: normal;
	font-family: "Dosis", "Liberation Sans", "Lucida Grande", Arial, Helvetica, Sans-Serif;
    color: #eee;
	margin: 0;
	line-height: 1.3em;
    width: 30%; 
    height: 100%; 
    position: fixed; 
    padding: 10px; 
    overflow: hidden; 
    display: flex; 
    flex-wrap: wrap; 
}


/* I.ii.a Screen Display Settings 
================================================== */

/* On screens that are more than 3000px wide */
@media screen and (min-width: 3000px) {
  #sidebar-landy {
    float: left; 
    min-height: 4000px; 
    position: relative; 
  } 

} 

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  #sidebar-landy {
    width: 100%;
    height: auto;
	  background-size: cover 100%;  
  }
  #sidebar-landy a /* {float: left;} */
  .content, .content-site, .content-clientWork, .content-DotM, .content-avianKnights, .content-gw2, .content-landy-homepage {
    margin-left: 0; 
    margin-top: 30px; /* Adds space to the top of the page, so the mobile menu doesn't cover page contents */ 
    width: 100%; 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto 100%; 
    background-position: left; 
  }

  /* Topbar menu functions for mobile, Landy homepage customizations */ 

    /* The container <div> - needed to position the dropdown content */
    #sidebar-landy { 
      position: fixed; /* Keeps mobile menu fixed to the same position upon scroll */ 
      top: 0; /* Positions mobile menu to the top of the page */
      display: inline-block; 
      overflow: visible; 
      z-index: 3; /* Displays mobile menu on top of all other content */
     }

    /* Show the dropdown menu on hover */
    #sidebar-landy:hover #menu { display: block; }

    /* Custom mobile menu colors for Landy homepage */ 
    .button-mobile { 
      color: #ffa334; 
    }

    /* Show element only when on mobile */
    .showOnlyOnMobile { display: block; }

    /* Hide desktop element when on mobile */
    .showOnlyOnDesktop { display: none; }

    /* Set comic pages to fill width of mobile displays */ 
      .content-comics {
        padding: 0;  
      }

    /* Reduce top text on individual comic pages for mobile displays */ 
      #menu-comics {
        font-size: 1.1rem; 
      }

}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) and (-webkit-min-device-pixel-ratio: 2) {
  #sidebar-landy a {
    text-align: center;
    float: none;
	  background-size: cover 100%; 
  }
} 



/* END Landy Sidebar Settings
================================================== */




/* END Comics Formatting 
================================================== */



/* II. Comics - Mordremoth's Champion BG 
================================================== */

/* This is the formatting for the background image on individual comic pages - not the homepage background image */ 
.mordremoths-champion-bg {
	background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .8), rgba(0, 0, 0, .7), rgba(0, 0, 0, 1)), url('../harbinger/mordremoths-champion-bg-greyscale50.png');
  /* Below applies a greyscale filter to the background image, but it will affect all contents in the child div containers */ 
  /* -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  /* filter: grayscale(50%); */ 
  background-repeat: no-repeat; 
	background-attachment: scroll;  
	background-size: contain, cover; 
  background-color: #000000;
  background-position: center; 
  margin-top: 0px; 
  margin-bottom: 0px; 
  margin-right: auto; 
  margin-left: auto; 
  width: 100%; 
  height: 100%; 
  position: relative; 
  padding: 0px; 
  overflow: hidden;  
  float: left; 
}

.mordremoths-champion-bg a:link, .mordremoths-champion-bg a:visited, .mordremoths-champion-bg a:hover, .mordremoths-champion-bg a:active {
	color: #f58c2b; 
}


/* END Comics - Mordremoth's Champion BG 
================================================== */




/* III. Mirebeast Formatting 
================================================== */


/* III.i Mirebeast Homepage Formatting 
================================================== */

/* Custom background image for Mirebeast homepage. This is a div to place atop (nested within) the "Landy Homepage" class, to add a custom background image for the Mirebeast part of the site. */ 
.content-mirebeast-homepage {
	background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .8), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url('../mirebeast/mirebeast-bg.png');
  background-repeat: inherit;
	background-attachment: inherit;
	background-size: inherit; 
  background-position: inherit; 
  margin: -10px; 
}


.sidebar-mirebeast-bg {
  background-color: #1a1e1d;
	background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 1), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../mirebeast/mirebeast-bg.png'); 
	/* background-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, .8), rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)), url('../graphics/mordremoths-champion-bg-cropped.png'); */ 
	background-repeat: inherit;
	background-attachment: inherit;
	background-size: inherit; 
  background-position: inherit; 
  position: inherit; 
  overflow: inherit; 
  display: inherit; 
  flex-wrap: inherit; 
  width: inherit; 
  height: inherit; 
  margin: -10px; 
}

/* END Mirebeast Homepage Formatting 
================================================== */


/* III.ii Mirebeast Comic Pages Formatting 
================================================== */

/* Formatting for the background image on individual comic pages - not the homepage background image */ 
.mirebeast-bg {
	background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .5), rgba(0, 0, 0, .6), rgba(0, 0, 0, 1)), url('../mirebeast/graphics/mirebeast-page-bg.png');
  /* Below applies a greyscale filter to the background image, but it will affect all contents in the child div containers */ 
  /* -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  /* filter: grayscale(50%); */ 
  background-repeat: no-repeat; 
	background-attachment: scroll;  
	background-size: contain, cover; 
  background-color: #000000;
  background-position: center; 
  margin-top: 0px; 
  margin-bottom: 0px; 
  margin-right: auto; 
  margin-left: auto; 
  width: 100%; 
  height: 100%; 
  position: relative; 
  padding: 0px; 
  overflow: hidden;  
  float: left; 
}

.mirebeast-bg a:link, .mirebeast-bg a:visited, .mirebeast-bg a:hover, .mirebeast-bg a:active {
	color: #f58c2b; 
}

/* END Mirebeast Comic Pages Formatting 
================================================== */


/* END Mirebeast Formatting 
================================================== */