html/*Maybe I will remove this part. I am expermienting will this make the empty space above or below the footer dissapear. */
{
	height:100%;
	margin:0; 
	padding:0;
}

body
{
	box-sizing: border-box;
	height:100%;
	margin:0;   /*Maybe I will remove this part. I am expermienting will this make the empty space above or below the footer dissapear. */
	padding:0; /*Maybe I will remove this part. I am expermienting will this make the empty space above or below the footer dissapear. */

	font-family: verdana, arial, geneva, helvetica, sans-serif;
	/*font-size: 62.5%; 
	line-height: 1.33em; */
	
	color: rgb(115, 76, 38);
	background-color: black;
	background-image: url("img/kamen.jpg");
	background-repeat: repeat;
    background-attachment: fixed;
    /*background-position: center; */
}

/*********Responsive grid classes */

  * {
    box-sizing: border-box;
  }

  .row:after {
    content: "";
    clear: both;
    display: block;
  }

  /* For mobile phones: */
    [class*="col2-"] { /*Responsive grid class names aren't the same here as they were in my NWN2 responsive siteI did find and replace to change all col- calssess into col2-, which is a new custom name I made to 
    make my custom columns named differently than Bootstrap columns. */
    float: left;
    /*padding: 15px;
    /*border: 1px solid red;*/
    width: 100%; /* For mobile phones: */
  }

    @media only screen and (min-width: 120px) {
  /* For tablets: */
  .col2-s-1 {width: 8.33%;}
  .col2-s-2 {width: 16.66%;}
  .col2-s-3 {width: 25%;}
  .col2-s-4 {width: 33.33%;}
  .col2-s-5 {width: 41.66%;}
  .col2-s-6 {width: 50%;}
  .col2-s-7 {width: 58.33%;}
  .col2-s-8 {width: 66.66%;}
  .col2-s-9 {width: 75%;}
  .col2-s-10 {width: 83.33%;}
  .col2-s-11 {width: 91.66%;}
  .col2-s-12 {width: 100%;}
  }

  @media only screen and (min-width: 300px) {
  /* For tablets: */
  .col2-m-1 {width: 8.33%;}
  .col2-m-2 {width: 16.66%;}
  .col2-m-3 {width: 25%;}
  .col2-m-4 {width: 33.33%;}
  .col2-m-5 {width: 41.66%;}
  .col2-m-6 {width: 50%;}
  .col2-m-7 {width: 58.33%;}
  .col2-m-8 {width: 66.66%;}
  .col2-m-9 {width: 75%;}
  .col2-m-10 {width: 83.33%;}
  .col2-m-11 {width: 91.66%;}
  .col2-m-12 {width: 100%;}
  }

  @media only screen and (min-width: 500px) {
  /* For desktop: */
  .col2-l-1 {width: 8.33%;}
  .col2-l-2 {width: 16.66%;}
  .col2-l-3 {width: 25%;}
  .col2-l-4 {width: 33.33%;}
  .col2-l-5 {width: 41.66%;}
  .col2-l-6 {width: 50%;}
  .col2-l-7 {width: 58.33%;}
  .col2-l-8 {width: 66.66%;}
  .col2-l-9 {width: 75%;}
  .col2-l-10 {width: 83.33%;}
  .col2-l-11 {width: 91.66%;}
  .col2-l-12 {width: 100%;}
  }

/************Responsive grid classes end here */

p.footer_text {
  /*Code from the previous version of the site.*/
  /*margin:0em; /*For some unknown reason, if I leave this out, there is no margin or padding below the footer text. I would expect that there is no margin when I set the margin to 0 like here.*/
 /*I added the code below in an experiment to better distance the text "Code and design by BG" from the icon images at the bottom and from the bottom of the page, especially wehn the icon images at
 the bottom break into two rows.*/
  margin-top: 4px;
  margin-bottom: 4px;

  /*New code*/
  font-size: 0.8em;
}


a:link{
  color: rgb(115, 76, 38);
}

a:visited{
  color: rgb(115, 76, 38);
}

a:hover{
  color : #993300; 
}


body > div.page_container { height: auto; min-height: 100%; } /*Fix that is applied only to IE6, because height:100% doens't work with it, I think. I saw this fix in some footer tutorial. */

div.page_container /*This is a container that is to contain the header, main, and footer. Its fuction is to set min-height to 100% so that there would be no empty space between the footer and the bottom of the page. */
{
  /*Old CSS styling from NWN2 responsive version*/
  position: relative;
  box-sizing: border-box; /*Maybe I will remove this part. I am expermienting will this make the empty space above or below the footer dissapear. */
  max-width: 720px;
  height: auto;
  min-height: 100%;
  /*height: 100%; /*This is for IE 6 and IE 5.5. A site where I saw this container solution had this line. */
  margin: 0 auto;

    background-color: rgb(230, 204, 179);
    background-image: url(img/pergament.jpg);
    background-size: 100% 100%;
    padding: 0;
}


/****************************************************************************************/
/****************************************************************************************/
/***************** A big block of code I coped from the internet. It sets colors to various things in Bootstrap navbars.*/
//***I need to test out changing these colors to see what selector targets what in navbars.*/

/*
.navbar-default {
  background-color: rgb(230, 210, 106);
  border-color: rgb(115, 76, 38);
}

.navbar-default .navbar-brand {
  color: #110000;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #514e1e;
  background-color: transparent;
}

.navbar-default .navbar-text {
  color: #777777;
}

.navbar-default .navbar-nav > li > a {
  color: #777777;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333333;
  background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555555;
  background-color: #0000de;
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: #dddddd;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #dddddd;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #cccccc;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #0000de;
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555555;
  background-color: #0000de;
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #777777;
  border-bottom-color: #777777;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555555;
    background-color: #0000de;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}

.navbar-default .navbar-link {
  color: #777777;
}

.navbar-default .navbar-link:hover {
  color: #333333;
}


/************End of a big block of code I coped from the internet. It sets colors to various things in Bootstrap navbars.  */
/****************************************************************************************/
/****************************************************************************************/


/**Another block of code for changing the color of navbar things that I copied from the internet. */
/* START OF Change the Navbar Colors/Font/Size */
/* Adjust Menu (red) text color, (Garamond) font-family, (1.5em) font-size  */

.navbar .nav > li > a,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a {
display:        inline;
color:          red;                        
font-family:    Garamond;
font-size:      1.5em;
padding:        5px 20px;
}
 
/* Adjust Menu colors - Normal */
.navbar .nav > li > a{
color:          white;
text-shadow:    none;
}
/* Adjust Menu colors - Hover */
.navbar .nav > li > a:hover{ 
color:          yellow;                      
text-shadow:    none;
}
/* Adjust Menu colors - Active */
.navbar .nav > li > a:active,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a {
color:          blue;
text-shadow:    none;
}
 
/* Adjust dropdown Menu items (blue) text color, (yellow) shading and (green) border */
.dropdown-menu > li > a {
color:          blue;
background:     yellow;
border-bottom:  2px solid green;
}
 
/* Remove the Hover/Focus Colors  */
/*.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a, 
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
color:          #5A5A5A;
}
/* END OF Change the Navbar Colors/Font/Size */
/**End of another block of code for changing the color of navbar things that I copied from the internet. */

/*My attempt to change the backgrouund color of navbars */
/*********************************/
.navbar{
  background-color: rgb(115, 76, 38); /*Brown colors used on normal and hover text on the NWN2 site: rgb(115, 76, 38); #993300; */
  color: white;

}

.nav-pills>li>a, .nav-pills>li>a:focus {
    color: rgb(115, 76, 38);
    background-color: transparent;
}

.nav-pills>li>a:hover {
    color: #fff;
    background-color: rgb(115, 76, 38);
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: rgb(115, 76, 38);
}

.nav-pills{
    /*border:1px solid rgb(115, 76, 38);*/
    /*color: #fff;*/
    /*background-color: rgb(115, 76, 38);*/
}

  @media only screen and (max-width: 768px) { /*This creates a bottom border below the top menu on smaller screens, at the breakpoint where the menu is exchanged for a colllapse button.*/
  /* For desktop: */
  nav.container-fluid.top_menu  {
  border-bottom:1px outset rgb(115, 76, 38);
  /*border-radius: 3px;*/
  }
}


/*********************************/
/*End of teh code for my attempt to change the backgrouund color of navbars */


header.slideshow /*For the slideshow with the NWN2 image at the top of the page */
{
	/*Old CSS styling from NWN2 responsive version*/
	box-sizing: border-box;
	max-width: 720px;
	height: auto;
  /*margin: 0 auto;
  padding:0;
	/*background-image: url(img/cas190L2.jpg);*/

  /*New CSS styling  that wasn't in NWN2 responsive version*/
  /*margin: -20 -20;
  padding:-10;*/
}

main /*This can be a container for the central column of the site, which has the pergament.jpg as the background. I can make its max width to be the width of the pergament.jpg,
and use that width on desktop screens, and I can have it be smaller on tablets and mobiles.
-But I don't know whether it is possible to have at the same time a max width, and yet to have the container change its size if you resize the window.
-^Maybe that is possible. I could set a media query that says that if min wievport width is greater than the width of that background image, then have the container be
the width of the image, and if it is of a smaller width, than have it be 100% of the width of the viewport, or 12 columns.*/
{
  /*Old CSS styling from NWN2 responsive version*/
  box-sizing: border-box;
  /*width: 720px;*/
  height: auto;
  min-height: 100%;
  margin: 0 auto;
  /*padding: 10 50; /* I have copied this into article.text for now.*/
  
  /*Maybe I will remove this part. I am expermienting will this make the empty space above or below the footer dissapear. */
  /*position: relative;
  /* */
  
  /*background-color: rgb(230, 204, 179);*/ /*I have copied this into div.page_container, so there is no need to duplicate it here.*/
  /*background-image: url(img/pergament.jpg);*/ /*I have copied this into div.page_container, so there is no need to duplicate it here.*/
  /*End of the old CSS styling from NWN2 responsive version*/
}

.top_menu /*I can use this for the <nav> or <ul> element of the main menu at the top of the page, with buttons for other pages */
{
  /*Old CSS styling from NWN2 responsive version*/
  /*height:35px;*/
  text-align: center;

  /*New CSS styling  that wasn't in NWN2 responsive version*/
  margin: 0 auto;
  padding:0;
  width: 100%;
  float:none;
}


article.text /*A container for text on pages. I am trying to use it so that I wouldn't have to set padding on the main. I am doing this as a part of trying to remove empty space before or after the footer, and as a part of that effort I want to try to put the header.slideshow into main, and I can do that only if the main doesn't have padding. */
{
    /*Old CSS styling from NWN2 responsive version*/
    /*padding: 10 50;*/ /*This is the padding style I previously used, before I set article text to be the same width as te top menu.*/
    /*padding: 10 88;*/
    padding-bottom:85px;   /* Height of the footer. This is supposed to protect the article text from being hidden by the footer if the viewport size is very small. */

    /*New CSS styling  that wasn't in NWN2 responsive version*/
    padding: 0 0;
    margin: 0 0;
}

@media only screen and (max-width: 720px) {
    article.text {
      padding: 10 50;
      padding-bottom:85px;   /* Height of the footer. This is supposed to protect the article text from being hidden by the footer if the viewport size is very small. */
    }
}

@media only screen and (max-width: 676px) {
    article.text {
      padding: 30 20;
      padding-bottom:150px;   /* Height of the footer. This is supposed to protect the article text from being hidden by the footer if the viewport size is very small. */
    }
}

@media only screen and (max-width: 373px) {
    article.text {
      padding: 55 20;
      padding-bottom:215px;   /* Height of the footer. This is supposed to protect the article text from being hidden by the footer if the viewport size is very small. */
    }
}

@media only screen and (max-width: 280px) {
    article.text {
      padding: 60 20;
      padding-bottom:280px;   /* Height of the footer. This is supposed to protect the article text from being hidden by the footer if the viewport size is very small. */
    }
}

.custom-padding{ /*I made this class in an attempt to add margin or padding on the sides of the top menu that would make it a bit more narrow, but so far it hasn't given any result.*/
  box-sizing: border-box;
  margin: 50 50;
  padding: 100 100;
}

img.thumbs_indexpage /*For the four thumbnail images on the index.html page. */
{
	/*Old CSS styling from NWN2 responsive version*/
	/*float:right;
	clear: right;
	margin: 0 0 0 10;*/

  	/*New CSS styling  that wasn't in NWN2 responsive version*/
	/*max-width: 207px;*/
}

img.col-4_thumb /*For thumbnails of screeenshots and concept art that is meant to go into col-4 responsive grid columns. */
{
  /*Old code*/
  padding: 5px;
  height: auto;
  /*width: 100%;*/
  text-align: center;
  border: 1px solid rgba(255,255,255,0); /*I used border 1 and rgba with transparency here because when I set border 0, in Firefox the rows moved by a pixel or so when I hovered over them. But maybe that was still better than this solution, because some browsers don't support transparency, so in them this would show with a white border around the images, which is a worse thing than the rows moving by a pixel or so. ---So, it would probably be better to return this to border 0 and no color. */
  /*margin: 0px;

  /*New code*/
  max-width: 100%;
  /*margin-right: 0px;*/
}

img.col-4_thumb:hover {
    /*border:1px solid #993300;*/
    background-color: white;
}

img.col-4_thumb:first-child/*For thumbnails of screeenshots and concept art that is meant to go into col-4 responsive grid columns. */
{
  /*margin-left: 10px;*/
}

img.col-4_thumb:last-child /*For thumbnails of screeenshots and concept art that is meant to go into col-4 responsive grid columns. */
{
  /*margin-right: 10px;*/
}


img.reviewsites_reviewpage /*For the four thumbnail images on the index.html page. */
{
  /*Old code*/
  float:left;
  /*clear: both;*/
  /*margin: 5 10 20 0;*/

  /*New code*/
  margin: 5 10 0 0;
}

/*
img.buylinks_buypage /*For the four thumbnail images on the index.html page. */
/*{
  /*Old code*/
  /*float:left;*/
  /*clear: both;
  margin: 5 0 10 15;

  /*New code*/
/*}*/

.navbar-toggle  /*Solution I found on the internet for the problem of the border around the collapse button (which appears in the menu at the top on smaller screens) not appearing if I don't put the classess "navbar navbar-default" or "navbra navbar-inverse" into the <nav>
that contains the button and the menu at the top. */
{
    /*position:relative;
    float:right;
    padding:9px 10px;
    margin-top:8px;
    margin-right:15px;
    margin-bottom:8px;
    background-color:transparent;
    background-image:none;
    border-radius:4px;*/
    /*^These lines above that I commented out are probably what is already in Bootstrap classes, while the line below is what was added to create the solution.*/

   border:1px solid rgb(115, 76, 38);
}

.icon-bar  /*Solution I found on the internet for the problem of the three lines in the collapse button (which appears in the menu at the top on smaller screens) not appearing if I don't put the classess "navbar navbar-default" or "navbra navbar-inverse" into the <nav>
that contains the button and the menu at the top. */
{
    /*display:block;
    width:22px;
    height:2px;
    border-radius:1px;*/
    /*^These lines above that I commented out are probably what is already in Bootstrap classes, while the line below is what was added to create the solution.*/

    border:1px solid rgb(115, 76, 38);
}

div.container-720{

}


footer /* For author and copyright info.*/
{
  /*position: absolute;*/   /*This solution didn't work. See the explanation below */
  /*bottom:0;*/     /*This solution didn't work. See the explanation below */
  
  box-sizing: border-box;
  position:relative;
  display: block;
  clear:both;
  height: 85px;
  padding: 0em;
  /*z-index:10; /*Maybe I will remove this line. I am expermienting will this make the empty space above or below the footer dissapear. */
  
  font-size: 0.8em;
  text-align: center;
  
  /*I copied this whole code below from main, so I could try to put the footer outside of main and still have it look normal and has the same background as main.
  This seems to have achieved the result I wanted. After I added this, there is finally no empty space before or after the footer.
  WHen I tried positioning the footer absolutely, like I saw on two solutions for the footer problem on the internet, then if I resized the browser to be very small vertically, the footer would in scome cases be displayed over the normal page content, such as text and images, because absolutely positioned footer would always display on the screen, and if the browser is small enough vertically, then the footer would be displayed over the normal page content instead of being below it.*/
  /*width: 720px;*/
  margin: 0 auto; 
  margin-top: -85px; /*Maybe I will remove this line. I am expermienting will this make the empty space above or below the footer dissapear. */
  
  /*background-color: rgb(230, 204, 179); /*I have copied this into div.page_container, so there is no need to duplicate it here.*/
  background-image: url(img/pergament.jpg);*/ /*I have copied this into div.page_container, so there is no need to duplicate it here.*/

  /*New code*/
  /*background-size: 100% 100%;*/
  background-attachment: fixed;
  background-repeat: repeat-y;
    max-width: 720px;
}

@media only screen and (max-width: 720px) {
    footer {
      width:100%; /*Before I added this media query that makes the width 100% at this breakpoint, the footer remained 720px wide and in one column no matter the width of the browser window.*/
      margin-top: -85px; /*Maybe I will remove this line. I am expermienting will this make the empty space above or below the footer dissapear. */

      /*New code*/
      background-size: 100% 100%;
      background-repeat: repeat-y;
      height: 85px;
    }
}

@media only screen and (max-width: 676px) {
    footer {
      width:100%;
      margin-top: -150px; /*I put this, as well as padding-bottom on article to double the size (I originally put it on double the size, which is 170, but it was too much so I reduced it) on this breakpoint 
      because at it the link icons at the bottom break into two rows. */

      /*New code*/
      background-size: 100% 100%;
      background-repeat: repeat-y;
      height: 146px;
      /*height: 207px;*/
    }
}

@media only screen and (max-width: 373px) {
    footer {
      width:100%;
      margin-top: -215px; /*I put this, as well as padding-bottom on article to double the size (I originally put it on double the size, which is 170, but it was too much so I reduced it) on this breakpoint 
      because at it the link icons at the bottom break into two rows. */

      /*New code*/
      background-size: 100% 100%;
      background-repeat: repeat-y;
      /*height: 268px;*/
      height: 207px;
    }
}

@media only screen and (max-width: 280px) {
    footer {
      width:100%;
      margin-top: -280px; /*I put this, as well as padding-bottom on article to double the size (I originally put it on double the size, which is 170, but it was too much so I reduced it) on this breakpoint 
      because at it the link icons at the bottom break into two rows. */

      /*New code*/
      background-size: 100% 100%;
      background-repeat: no-repeat;
      height: 268px;
    }
}

@media only screen and (max-width: 225px) {
    footer {
      width:100%;
      margin-top: -345px; /*I put this, as well as padding-bottom on article to double the size (I originally put it on double the size, which is 170, but it was too much so I reduced it) on this breakpoint 
      because at it the link icons at the bottom break into two rows. */

      /*New code*/
      background-size: 100% 100%;
      background-repeat: no-repeat;
      height: 329px;
    }
}

@media only screen and (max-width: 215px) {
    footer {
      width:100%;
      margin-top: -410px; /*I put this, as well as padding-bottom on article to double the size (I originally put it on double the size, which is 170, but it was too much so I reduced it) on this breakpoint 
      because at it the link icons at the bottom break into two rows. */

      /*New code*/
      background-size: 100% 100%;
      background-repeat: no-repeat;
      height: 402px;
    }
}

@media only screen and (max-width: 155px) {
    footer {
      width:100%;
      margin-top: -475px; /*I put this, as well as padding-bottom on article to double the size (I originally put it on double the size, which is 170, but it was too much so I reduced it) on this breakpoint 
      because at it the link icons at the bottom break into two rows. */

      /*New code*/
      background-size: 100% 100%;
      background-repeat: no-repeat;
      height: 463px;
    }
}

/*
@media only screen and (max-width: 720px) {
    div.page_container {
        width: 100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}
*/

nav.footer  /*For Obsidian, Bioware, and other links in the footer. */
{
  /*Old code from the NWN2 site responsive version*/
  position:relative;
  display:block;
  clear:both;
  
  box-sizing: border-box;
  margin:0;
  padding:0;
  height:65px;
  
  text-align: center;
  /*End of the old code from the NWN2 site responsive version*/
}

/*
@media only screen and (max-width: 640px) {
    nav.footer  {
      height:130px; /*This media query solved the problem of the icon images at the bottom and the text "Design and code by BG" overlapping when the icon images break into two rows.*/
/*    }
}

@media only screen and (max-width: 340px) {
    nav.footer  {
      height:195px; /*This media query solved the problem of the icon images at the bottom and the text "Design and code by BG" overlapping when the icon images break into two rows.*/
 /*   }
}

@media only screen and (max-width: 247px) {
    nav.footer  {
      height:260px; /*This media query solved the problem of the icon images at the bottom and the text "Design and code by BG" overlapping when the icon images break into two rows.*/
 /*   }
}*/