/* Contents

I. Body Settings 
II. Main Content Settings
  II.A textbody-noBorder 
  II.B textbody-noBorder w/ BG Color
III. Commission Thumb Gallery 
IV. Header Settings
V. Navbar Settings
  V.i Navbar Settings - Desktop Drop-down links 
VI. Sidebar Settings
  VI.A Mobile Menu Button 
VII. Screen Display Settings 
VIII. Links Menu CSS 
IX. Web3forms Custom Formatting 
X. Comics Formatting
  X.i Comic Pages Topbar Menu  
  X.A Comics - Mordremoth's Champion BG 

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



/* I. Body Settings
================================================== */
body {
  font-family: "Dosis", "Open Sans", "Cabin", "Helvetica", "Arial", sans-serif;
  /* letter-spacing: 0.075em; */ 
  letter-spacing: 0.050em;
  font-size: 1.75rem;
  font-weight: 400;
  color: #777;
}

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

.quotes { 
  font-style: italic; 
}

body a {
  color: #5194ce; 
}

body a:visited {
  color: #5194ce; 
}

/* Set opacity for social icons */ 
img.socials {
  opacity: 0.5; 
}

/* II. Main Content Settings
================================================== */
.content {
	/* 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;
  width: 70%; 
  height: 100%; 
  position: relative; 
  padding: 10px; 
  overflow: hidden; 
  float: right;
}

.content-site {
	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, .8), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)), url('../graphics/bg-site.jpg');
  background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain, cover; 
  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; */
}

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

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

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

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



.textbody {
  padding-top: 20px;
  padding-bottom: 9px;
  border-bottom: 1px solid #eee;
	margin: 0 auto;
	float: none;
}
.textbody p { padding-top: 20px; }

.textbody h1 { text-align: center; }

h1.left, h2.left { text-align: left; }




/* II.A START textbody-noBorder
================================================== */

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

.textbody-noBorder p {
  padding-bottom: 1em; 
}

.textbody-noBorder p.left {
  text-align: left; 
  margin-left: 20px; 
}

.textbody-noBorder h3, h4 {
  text-align: left; 
}

/* END textbody-noBorder
================================================== */

.headerCenter { text-align: center; }

#footer { background-color: inherit; }

#imgProfile { 
  text-align: left; 
  margin-top: 5px; 
	margin-right: 20px; 
	margin-bottom: 20px; 
	width: auto;
	height: 125px;
  float: left; 
}

.img100 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.imgCommissions { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
}

.text-muted { text-align: center; color:rgba(142, 142, 142, 0.6) }

.col-sm-4 p, 
.col-md-4 p {
	padding-top: 0px;
	overflow: hidden;
}

/* Thumbnail Settings */
.col-sm-1 img, 
.col-sm-2 img, 
.col-sm-3 img, 
.col-sm-4 img, 
.col-sm-10 img, 
.col-md-4 img {
	width: 100%;
	height: auto;
	max-width: 380px;
	max-height: auto;
  min-width: 100%; 
  /* min-height: 315px; */
  object-fit: cover; 
}

.col-sm-1, 
.col-sm-2, 
.col-sm-3, 
.col-sm-4, 
.col-sm-10, 
.col-md-4 {
  padding: 2px; 
}

.col-sm-1 p, 
.col-sm-2 p, 
.col-sm-3 p, 
.col-sm-4 p, 
.col-sm-10 p, 
.col-md-4 p {
  padding: 0; 
  padding-bottom: 0; 
  margin-bottom: 0; 
}

.row { 
  margin-left: 2px; 
  margin-right: 2px; 
}

.flex-container {
display: flex;
justify-content: center; /* Centers the child horizontally */
/* align-items: center; /* Centers the child vertically */
height: 100vh; /* Full viewport height */
}

.center-div {
width: 50%;
}

/* Gallery Description Text */ 
.galleryBlurb {
  width: 100%; 
  text-align: center; 
  margin: auto; 
}

/* General List formatting */ 
li {
  padding-bottom: .5em; 
}

/* II.B START textbody-noBorder w. BG color
================================================== */

.textbody-noBorder-bgcolor {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 0px solid #eee;
	margin: 0 auto;
  float: none;
  text-align: center; 
  background-color: #c3caa680; 
}

.textbody-noBorder p {
  padding-bottom: 1em; 
}

.textbody-noBorder p.left {
  text-align: left; 
  margin-left: 20px; 
}

.textbody-noBorder h3, h4 {
  text-align: left; 
}

/* END textbody-noBorder
================================================== */


/* III. Commission Thumb Gallery
================================================== */

.row-tinyThumbs {
  display: flex;
  justify-content: left;
  align-items: top;
  width: 100%; 
  margin-left: 20px; 
  margin-top: 0px; 
  margin-bottom: 20px; 
  float: left; 
  display: block; 
}

.row-tinyThumbs img {
	width: auto;
	height: 100%;
	max-width: auto;
	max-height: 100px; 
  padding: 3px; 
  margin: 0px; 
  text-align: left; 
  float: left; 
}

/* @media only screen and (max-width: 600px) {
   
  .row-tinyThumbs {
    display: block; 
    width: 100%; 
    height: auto; 
  }

  .row-tinyThumbs img {
    float: left; 
}

} */ 

/* END Commission Thumb Gallery
================================================== */



/* IV. Header Settings
================================================== */

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 0px solid #eee;
  text-align: center;
  line-height: 1.4em; 
  color: #eee; 
  width: 100%; 
}

.page-header h1 {
  margin: .67em 0;
  font-size: 4rem;
  font-family: "Dosis", "Orbitron", "Michroma";
  line-height: .9em;
  text-transform: none;
  letter-spacing: 0.05em;
  font-weight: 100;
  font-style: normal;
  text-align: center;
  margin: 0 auto 28px;
}

.page-header h1 a:link, 
.page-header h1 a:visited {
  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*/
  color: rgb(202, 244, 250);  
}

.page-header h1 a:hover, 
.page-header h1 a:active {
  text-decoration: none;
	text-shadow: 0px 0px 10px #ffffff;
}

h2 { 
	padding-top: 20px; 
	padding-bottom: 20px; 
	font-weight: 400;
}

h3 { 
	padding-top: 20px; 
	font-weight: 400;
}

/* END Header Settings
================================================== */


/* V. Navbar Settings
================================================== */

#menu {
  background-color: none;
  margin-left: 0;
  margin-right: 0;
  padding-top: 5px;
  padding-bottom: 10px;
  border-bottom: 0px solid #eee;
	line-height: 3em;
	font-size: 1.35rem;
	text-align: center;
/* Allows subcategories of parent divs to show beyond borders of desktop drop-down menu */ 
  overflow: visible;
  text-transform: none;
  font-weight: 100;
  position: relative; 
/* Centers the menu navigation bar */ 
  margin: 0 auto; 
}

#menu ul {
  list-style:none;
  padding: 10px;
  color: #dbf6ff; 
  background-color: rgb( 0, 0, 0, .6);
  float: left; 
  margin: 0 auto;
}

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

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

#menu li a:link, 
#menu li a:visited {
  display:inline-block;
  font-size:1.2em;
  color:#eee;
	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 li a:hover, 
#menu li a:active {
    color:#eee;
	text-decoration: underline; 
	text-shadow: 0px 0px 10px #ffffff;
}

/* V.i Navbar Settings - Desktop Drop-down links 
================================================== */

/* Style desktop drop-down menu navigation (for sub-links) - hidden until hover */ 
#menu ul.drop-down { 
  display: none; 
  background-color: rgb(0, 0, 0, 1); 
  text-align: center;
  min-width: 200px; 
/* Style subcategory text (inherits properities from elsewhere otherwise) */ 
  font-weight: 100; 
  font-size: 1em; 
}

/* Style the parent category */ 
#menu li.parent-link { 
  font-weight: 600; 
  font-size: 1.2em; 
/* If not specified here, this is otherwise light blue for some reason */ 
  color: #eee; 
}

/* Show subcategories on hover. 
Changing to 'ul' from the original 'li' calls the menu to show below the parent link, instead of on top of/covering it */ 
#menu li.parent-link:hover ul.drop-down { 
  display: block; 
  position: absolute; 
  float: left; 
  z-index: 1; 
}

/* END Navbar Settings - Drop-down links 
================================================== */


.textbody-noBorder ul { text-align: left; }

.imgIndex { 
  max-width: 100%; 
}

/* END Navbar Settings
================================================== */


/* VI. Sidebar Settings
================================================== */

#sidebar {
  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/sidebar.jpg'); */ 
	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/sidebar.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: auto 100%; 
	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; 
}

.sidebarText-muted {
  /* color: #a5a5a5; */
  color: rgba(250, 250, 250, .6); 
  font-size: .9em; 
  line-height: 1.2em; 
}

#sidebar a:link, a:visited {
  color: rgb(202, 244, 250); 
	-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
	-moz-transition-duration: 0.5s; /*Mozilla duration version*/
	-o-transition-duration: 0.5s; /*Opera duration version*/

}

#sidebar a:hover, a:active {
  color: rgb(202, 244, 250); 
	text-shadow: 0px 0px 10px #ffffff;
}

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



/* VI.A Mobile Menu Button
These are the basic styles, but will not show on desktop. 
Scroll to "VII. Screen Display Settings" (right below) to adjust mobile functions. 
================================================== */ 
.button-mobile { 
  display: none; 
  background-color: #000; 
  border: 0; 
  color: rgb(202, 244, 250); 
  font-weight: 600; 
/* Below doesn't seem to work for some reason (doesn't work on the w3school sample page, either)
Leaving in case it might work in other browsers. */ 
  cursor: pointer; 
}



/* END Mobile Menu Button
================================================== */





/* VII. Screen Display Settings 
================================================== */

/* On screens that are more than 3000px wide */
@media screen and (min-width: 3000px) {
  #sidebar {
    float: left; 
    min-height: 4000px; 
    position: relative; 
  } 
  #menu {float: left; margin-bottom: 4000px;  }
  .content, .content-site, .content-clientWork, .content-DotM, .content-avianKnights, .content-gw2 {
    margin-left: 0; 
    min-height: 4000px; 
    position: relative; 
    float: left; 
  }
    .col-sm-1 img, 
    .col-sm-2 img, 
    .col-sm-3 img, 
    .col-sm-4 img, 
    .col-sm-10 img, 
    .col-md-4 img {
      width: 100%;
      height: auto;
      max-width: 380px;
      min-width: 100%; 
      max-height: auto; 
    }

} 


/* START desktop-only links page button width */
@media screen and (min-width: 700px) {

    #links ul li{
      width: 40%; 
    }

    #links li a:link, 
    #links li a:visited {
      width: 40%; 
    }

} 
/* END desktop-only links page button width */



/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  #sidebar {
    width: 100%;
    height: auto;
    position: relative;
	  background-size: cover 100%;  
  }
  #sidebar a /* {float: left;} */
  .content, .content-site, .content-clientWork, .content-DotM, .content-avianKnights, .content-gw2 {
    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-size: 100% auto; 
    background-image: none; 
  }

  /* Topbar menu functions for mobile */

    /* The container <div> - needed to position the dropdown content */
    #sidebar { 
      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 */
    }

    .page-header { display: none; }

    /* Show mobile menu button */
    .button-mobile { 
      display: block; 
      position: relative; 
    /* This places the button on top of the menu. Needs [position class] defined to work (relative or absolute). 
    z-values that are higher will always display over lower values. */
      z-index: 2; 
    } 

    /* Dropdown Content (Hidden by Default) */
    #menu, .text-center { 
      display: none; 
      position: absolute; 
      /* Adds drop-down menu bg color - doesn't style the secondary background 'border' - style instead in 'Links inside the dropdown' right below */
      background-color: /*  #333;  */ none; 
      color: rgb(202, 244, 250); 
      min-width: 160px;
      /* Adds drop-down menu background - doesn't seem to work, other styles must be overriding */
      /* box-shadow: 0px 8px  16px 0px rgba(0,0,0,0.2); */ 
      z-index: 1; 
    }

    /* Links inside the dropdown */ 
    #menu ul { 
      display: block; 
      padding: 50px 16px 30px 16px; /* top right bottom left; Set top higher to account for sticky mobile nav bar */
      text-decoration: none; 
      color: rgb(202, 244, 250); 
        -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.5s; /*Mozilla duration version*/
        -o-transition-duration: 0.5s; /*Opera duration version*/
      /* Style the drop-down background color */ 
      background-color: rgb(0, 0, 0, 0.8); 
    }

    /* Change color of dropdown links on hover */
    #menu a:hover { 
      color: rgb(202, 244, 250); 
      text-shadow: 0px 0px 10px #ffffff;
    }

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

    /* Change the background color of the dropdown button when the dropdown content is shown 
    #menu:hover .button-mobile {
      background-color: #ffa334; 
    } */

    /* Style the drop-down menu vertically on mobile upon hover */
    #menu ul li { display: block; }

    /* Show subcategories on hover, style subcategory links for mobile */ 
    #menu li.parent-link:hover ul.drop-down { 
      display: inline-block; 
      position: absolute; 
      margin-left: 30px; 
      margin-top: -16px; 
    }

    /* Make the profile photo not awkwardly large on mobile LOL */ 
    #imgProfile { 
      height: 100px;
    }

/* START desktop-only links page button width */
    #links ul li{
      width: 75%; 
    }

    #links li a:link, 
    #links li a:visited {
      width: 75%; 
    }
/* END desktop-only links page button width */s

}

/* 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 a {
    text-align: center;
    float: none;
	  background-size: cover 100%; 
  }
} 

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



/* VIII. Links Menu CSS 
================================================== */

#links {
  /* background-color: #ffa96a75; */
  margin-left: 0;
  margin-right: 0;
  padding: 5px 0 0 0;
  border-bottom: 0px solid #eee;
	line-height: 3em;
	font-size: 1.75rem;
	text-align: center;
  overflow:hidden;
  text-transform: normal;
  font-weight: 400;
  position: relative; 
  list-style-type: none; 
  color: #999; 
}

#links ul {
  list-style:none;
  padding: 10px;
  color: #fff; 
  float: none; 
  margin:0 auto;}

#links ul li{
  display:inline-block;
  list-style:none;
  padding:0.5em 1em 0.5em 0.5em;  
  vertical-align: top; 
  background-color: #5e624e60;
  /*width: 75%; */
}

#links li.selected {
  display:inline-block;
  font-weight: bold;
  font-size:1.2em;
  color:#fff;
}

#links li a:link, 
#links li a:visited {
  display:inline-block;
  font-size:1.2em;
  color:#fff;
  background-color: #5e624e60;
	text-decoration: none; 
  /*width: 75%; */

    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/
    -o-transition-duration: 0.5s; /*Opera duration version*/

}

#links li a:hover, 
#links li a:active {
  color:#fff;
  background-color: #5e624e90;
	text-decoration: none; 
	text-shadow: 0px 0px 10px #ffffff;
}

/* Center h3 & h4 headers for links page */
#links h3, #links h4 {
  text-align: center; 
  margin-top: 0px; 
}


/* END Links Menu CSS 
================================================== */



/* IX. Web3forms Custom Formatting 
================================================== */

.mb-6 {
  padding: 5px; 
  min-width: 100%; 
}

input, 
textarea {
  width: 100%; 
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px; 
}

/* END Web3forms Custom Formatting 
================================================== */


/* X. Comics Formatting 
================================================== */

.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; 
}

.textbody-center img {
  width: 100%; 
  max-width: 600px; 
}

.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; 
}



/* X.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 
================================================== */




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