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;
}
/*
*{
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*="col-"] {
float: left;
/*padding: 15px;*/
/*border: 1px solid red;*/
width: 100%; /* For mobile phones: */
}
@media only screen and (min-width: 120px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 300px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 500px) {
/* For desktop: */
.col-l-1 {width: 8.33%;}
.col-l-2 {width: 16.66%;}
.col-l-3 {width: 25%;}
.col-l-4 {width: 33.33%;}
.col-l-5 {width: 41.66%;}
.col-l-6 {width: 50%;}
.col-l-7 {width: 58.33%;}
.col-l-8 {width: 66.66%;}
.col-l-9 {width: 75%;}
.col-l-10 {width: 83.33%;}
.col-l-11 {width: 91.66%;}
.col-l-12 {width: 100%;}
}
/************Responsive grid classes end here */
h1 {
margin:1.5em 0 1.6em 0;
font-size: 1.8em;
line-height: 1em;
}
h2 {
margin:1.5em 0 0.2em 0;
font-size: 1.4em;
}
h2.not_bold {
font-weight: lighter;
}
.font-weight-normal{
font-weight: normal;
}
p{
font-size: 1.2em;
}
p.footer_text {
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;
}
p.review_text{
margin: 5 0 10 0;
}
.font_size16{
font-size: 1.2em;
/*font-weight: bold;*/
}
a:link{
color: rgb(115, 76, 38);
text-decoration: none;
}
a:visited{
color: rgb(115, 76, 38);
}
a:hover{
color : #993300;
text-decoration: underline;
}
a.topmenu {
margin-right: -4px; /*This formatting removes the gap between the buttons in the top menu that is caused by the gap between tags. Another way to fix that gap is to insert HTML open and close comments just after the closing and the next opened .*/
margin-left: 0px; /*This formatting works in conjunction with the above one and serves the same purpose.*/
}
/**************** Classes for image buttons in the top menu. I am not using this at the moment. */
/*
a.btnhome{
display:block;
width:79px;
height: 35px;
background-color: black;
background-image: url("img/btn/btn2Home1.gif");
}
a.btnhome:hover{
background-image: url("img/btn/btn2Home2.gif");
}
*/
/**************** */
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. */
{
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. */
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);
}
@media only screen and (max-width: 720px) {
div.page_container {
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
/*******################################### Header and its animations *******/
header.slideshow /*For the slideshow with the NWN2 image at the top of the page */
{
box-sizing: border-box;
width: 720px;
height: 190px;
margin: 0 auto;
padding:0;
/*background-image: url(img/cas190L2.jpg);*/
}
@media only screen and (max-width: 720px) {
header.slideshow {
width: 100%;
height: auto;
padding-bottom: 26.39%; /*26.39 is the percent of the height of slideshow images compared to their width. Without this setting, the container below the slideshow images was partly zaklonjen by them
on smaller screens. I first tried setting this percentage for height instead of for padding-bottom, but that made the height of the container scale based on the height of the window, and that didn't
give the results I wanted. */
}
}
div.slide_images /*A container for slide images in the header. Altough maybe I don't need this container at all. I can probably put the images directly into header.*/
{
position:relative;
}
img.flag_en
{
position:absolute;
top: 0;
right: 45px;
width: 27px;
height: 17px;
border: 0;
margin:0;
padding:0;
z-index: 2;
}
img.flag_sr
{
position:absolute;
top: 0;
right: 18px;
width: 27px;
height: 17px;
border: 0;
margin:0;
padding:0;
z-index: 2;
}
img.slide_image1 /*Slide image 1.*/
{
position:absolute; /*This is here because z-index works only on elements that have some positioning, and absolute positioning gave the best results when I tried out different ones.*/
-webkit-animation: image1 24s linear infinite;
-moz-animation: image1 24s linear infinite;
animation: image1 24s linear infinite;
}
img.slide_image2 /*Slide image 2.*/
{
position:absolute; /*This is here because z-index works only on elements that have some positioning, and absolute positioning gave the best results when I tried out different ones.*/
-webkit-animation: image2 24s linear infinite;
-moz-animation: image2 24s linear infinite;
animation: image2 24s linear infinite;
}
img.slide_image3 /*Slide image 3.*/
{
position:absolute; /*This is here because z-index works only on elements that have some positioning, and absolute positioning gave the best results when I tried out different ones.*/
-webkit-animation: image3 24s linear infinite;
-moz-animation: image3 24s linear infinite;
animation: image3 24s linear infinite;
}
img.slide_image4 /*Slide image 4.*/
{
position:absolute; /*This is here because z-index works only on elements that have some positioning, and absolute positioning gave the best results when I tried out different ones.*/
-webkit-animation: image4 24s linear infinite;
-moz-animation: image4 24s linear infinite;
animation: image4 24s linear infinite;
}
img.slide_image5 /*Slide image 5.*/
{
position:absolute; /*This is here because z-index works only on elements that have some positioning, and absolute positioning gave the best results when I tried out different ones.*/
-webkit-animation: image5 24s linear infinite;
-moz-animation: image5 24s linear infinite;
animation: image5 24s linear infinite;
}
img.slide_image6 /*Slide image 6.*/
{
position:absolute; /*This is here because z-index works only on elements that have some positioning, and absolute positioning gave the best results when I tried out different ones.*/
-webkit-animation: image6 24s linear infinite;
-moz-animation: image6 24s linear infinite;
animation: image6 24s linear infinite;
}
/********* Image 1 animation */
/* Chrome, Safari, Opera */
@-webkit-keyframes image1 {
0% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 1*/
9.66% {opacity: 1;filter:alpha(opacity=1);} /*filter:alpha(opacity) is for compatibility with IE 8 and earlier versions. -Actually, only IE10+ supports animations, so this isn't necessary*/
16.66% {opacity: 0;filter:alpha(opacity=0);}
/* 26.33% {opacity: 0;}
33.33% {opacity: 0;}
43% {opacity: 0;}
50% {opacity: 0;}
59.66% {opacity: 0;}
66.66% {opacity: 0;}
76.33% {opacity: 0;}
83.33% {opacity: 0;} */
93% {opacity: 0;filter:alpha(opacity=0);}
100% {opacity: 1;filter:alpha(opacity=1);}
}
/* Firefox */
@-moz-keyframes image1 {
0% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 1*/
9.66% {opacity: 1;filter:alpha(opacity=1);} /*filter:alpha(opacity) is for compatibility with IE 8 and earlier versions. -Actually, only IE10+ supports animations, so this isn't necessary*/
16.66% {opacity: 0;filter:alpha(opacity=0);}
/* 26.33% {opacity: 0;}
33.33% {opacity: 0;}
43% {opacity: 0;}
50% {opacity: 0;}
59.66% {opacity: 0;}
66.66% {opacity: 0;}
76.33% {opacity: 0;}
83.33% {opacity: 0;} */
93% {opacity: 0;filter:alpha(opacity=0);}
100% {opacity: 1;filter:alpha(opacity=1);}
}
/* Standard syntax */
@keyframes image1 {
0% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 1*/
9.66% {opacity: 1;filter:alpha(opacity=1);} /*filter:alpha(opacity) is for compatibility with IE 8 and earlier versions. -Actually, only IE10+ supports animations, so this isn't necessary*/
16.66% {opacity: 0;filter:alpha(opacity=0);}
/* 26.33% {opacity: 0;}
33.33% {opacity: 0;}
43% {opacity: 0;}
50% {opacity: 0;}
59.66% {opacity: 0;}
66.66% {opacity: 0;}
76.33% {opacity: 0;}
83.33% {opacity: 0;} */
93% {opacity: 0;filter:alpha(opacity=0);}
100% {opacity: 1;filter:alpha(opacity=1);}
}
/******* Image 2 animation*/
/* Chrome, Safari, Opera */
@-webkit-keyframes image2 {
0% {opacity: 0;filter:alpha(opacity=0);}
9.66% {opacity: 0;filter:alpha(opacity=0);}
16.66% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 1*/
26.33% {opacity: 1;filter:alpha(opacity=1);}
33.33% {opacity: 0;filter:alpha(opacity=0);}
/* 43% {opacity: 0;}
50% {opacity: 0;}
59.66% {opacity:0;}
66.66% {opacity: 0;}
76.33% {opacity: 0;}
83.33% {opacity: 0;}
93% {opacity: 0;}*/
100% {opacity: 0;filter:alpha(opacity=0);}
}
/* Firefox */
@-moz-keyframes image2 {
0% {opacity: 0;filter:alpha(opacity=0);}
9.66% {opacity: 0;filter:alpha(opacity=0);}
16.66% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 1*/
26.33% {opacity: 1;filter:alpha(opacity=1);}
33.33% {opacity: 0;filter:alpha(opacity=0);}
/* 43% {opacity: 0;}
50% {opacity: 0;}
59.66% {opacity:0;}
66.66% {opacity: 0;}
76.33% {opacity: 0;}
83.33% {opacity: 0;}
93% {opacity: 0;}*/
100% {opacity: 0;filter:alpha(opacity=0);}
}
/* Standard syntax */
@keyframes image2 {
0% {opacity: 0;filter:alpha(opacity=0);}
9.66% {opacity: 0;filter:alpha(opacity=0);}
16.66% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 1*/
26.33% {opacity: 1;filter:alpha(opacity=1);}
33.33% {opacity: 0;filter:alpha(opacity=0);}
/* 43% {opacity: 0;}
50% {opacity: 0;}
59.66% {opacity:0;}
66.66% {opacity: 0;}
76.33% {opacity: 0;}
83.33% {opacity: 0;}
93% {opacity: 0;}*/
100% {opacity: 0;filter:alpha(opacity=0);}
}
/******* Image 3 animation*/
/* Chrome, Safari, Opera */
@-webkit-keyframes image3 {
0% {opacity: 0;filter:alpha(opacity=0);}
/* 9.66% {opacity: 0;}
16.66% {opacity: 0;}*/
26.33% {opacity: 0;filter:alpha(opacity=0);}
33.33% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 3 */
43% {opacity: 1;filter:alpha(opacity=1);}
50% {opacity: 0;filter:alpha(opacity=0);}
/* 59.66% {opacity: 0;}
66.66% {opacity: 0;}
76.33% {opacity: 0;}
83.33% {opacity: 0;}
93% {opacity: 0;}*/
100% {opacity: 0;filter:alpha(opacity=0);}
}
/* Firefox */
@-moz-keyframes image3 {
0% {opacity: 0;filter:alpha(opacity=0);}
/* 9.66% {opacity: 0;}
16.66% {opacity: 0;}*/
26.33% {opacity: 0;filter:alpha(opacity=0);}
33.33% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 3 */
43% {opacity: 1;filter:alpha(opacity=1);}
50% {opacity: 0;filter:alpha(opacity=0);}
/* 59.66% {opacity: 0;}
66.66% {opacity: 0;}
76.33% {opacity: 0;}
83.33% {opacity: 0;}
93% {opacity: 0;}*/
100% {opacity: 0;filter:alpha(opacity=0);}
}
/* Standard syntax */
@keyframes image3 {
0% {opacity: 0;filter:alpha(opacity=0);}
/* 9.66% {opacity: 0;}
16.66% {opacity: 0;}*/
26.33% {opacity: 0;filter:alpha(opacity=0);}
33.33% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 3 */
43% {opacity: 1;filter:alpha(opacity=1);}
50% {opacity: 0;filter:alpha(opacity=0);}
/* 59.66% {opacity: 0;}
66.66% {opacity: 0;}
76.33% {opacity: 0;}
83.33% {opacity: 0;}
93% {opacity: 0;}*/
100% {opacity: 0;filter:alpha(opacity=0);}
}
/******* Image 4 animation*/
/* Chrome, Safari, Opera */
@-webkit-keyframes image4 {
0% {opacity: 0;filter:alpha(opacity=0);}
/* 9.66% {opacity: 0;}
16.66% {opacity: 0;}
26.33% {opacity: 0;}
33.33% {opacity: 0;} */
43% {opacity: 0;filter:alpha(opacity=0);}
50% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 4 */
59.66% {opacity: 1;filter:alpha(opacity=1);}
66.66% {opacity: 0;filter:alpha(opacity=0);}
/* 76.33% {opacity: 0;}
83.33% {opacity: 0;}
93% {opacity: 0;}*/
100% {opacity: 0;filter:alpha(opacity=0);}
}
/* Firefox */
@-moz-keyframes image4 {
0% {opacity: 0;filter:alpha(opacity=0);}
/* 9.66% {opacity: 0;}
16.66% {opacity: 0;}
26.33% {opacity: 0;}
33.33% {opacity: 0;} */
43% {opacity: 0;filter:alpha(opacity=0);}
50% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 4 */
59.66% {opacity: 1;filter:alpha(opacity=1);}
66.66% {opacity: 0;filter:alpha(opacity=0);}
/* 76.33% {opacity: 0;}
83.33% {opacity: 0;}
93% {opacity: 0;}*/
100% {opacity: 0;filter:alpha(opacity=0);}
}
/* Standard syntax */
@keyframes image4 {
0% {opacity: 0;filter:alpha(opacity=0);}
/* 9.66% {opacity: 0;}
16.66% {opacity: 0;}
26.33% {opacity: 0;}
33.33% {opacity: 0;} */
43% {opacity: 0;filter:alpha(opacity=0);}
50% {opacity: 1;filter:alpha(opacity=1);} /*Visible keyframe of image 4 */
59.66% {opacity: 1;filter:alpha(opacity=1);}
66.66% {opacity: 0;filter:alpha(opacity=0);}
/* 76.33% {opacity: 0;}
83.33% {opacity: 0;}
93% {opacity: 0;}*/
100% {opacity: 0;filter:alpha(opacity=0);}
}
/******* Image 5 animation*/
/* Chrome, Safari, Opera */
@-webkit-keyframes image5 {
0% {opacity: 0;}/*
9.66% {opacity: 0;}
16.66% {opacity: 0;}
26.33% {opacity: 0;}
33.33% {opacity: 0;}
43% {opacity: 0;}
50% {opacity: 0;} */
59.66% {opacity:0;}
66.66% {opacity: 1;} /*Visible keyframe of image 5 */
76.33% {opacity: 1;}
83.33% {opacity: 0;}
/* 93% {opacity: 0;}*/
100% {opacity: 0;}
}
/* Firefox */
@-moz-keyframes image5 {
0% {opacity: 0;}/*
9.66% {opacity: 0;}
16.66% {opacity: 0;}
26.33% {opacity: 0;}
33.33% {opacity: 0;}
43% {opacity: 0;}
50% {opacity: 0;} */
59.66% {opacity:0;}
66.66% {opacity: 1;} /*Visible keyframe of image 5 */
76.33% {opacity: 1;}
83.33% {opacity: 0;}
/* 93% {opacity: 0;}*/
100% {opacity: 0;}
}
/* Standard syntax */
@keyframes image5 {
0% {opacity: 0;}/*
9.66% {opacity: 0;}
16.66% {opacity: 0;}
26.33% {opacity: 0;}
33.33% {opacity: 0;}
43% {opacity: 0;}
50% {opacity: 0;} */
59.66% {opacity:0;}
66.66% {opacity: 1;} /*Visible keyframe of image 5 */
76.33% {opacity: 1;}
83.33% {opacity: 0;}
/* 93% {opacity: 0;}*/
100% {opacity: 0;}
}
/******* Image 6 animation*/
/* Chrome, Safari, Opera */
@-webkit-keyframes image6 {
0% {opacity: 0;}/*
9.66% {opacity: 0;}
16.66% {opacity: 0;}
26.33% {opacity: 0;}
33.33% {opacity: 0;}
43% {opacity: 0;}
50% {opacity: 0;}
59.66% {opacity:0;}
66.66% {opacity: 0;} */
76.33% {opacity: 0;}
83.33% {opacity: 1;} /*Visible keyframe of image 6 */
93% {opacity: 1;}
100% {opacity: 0;}
}
/* Firefox */
@-moz-keyframes image6 {
0% {opacity: 0;}/*
9.66% {opacity: 0;}
16.66% {opacity: 0;}
26.33% {opacity: 0;}
33.33% {opacity: 0;}
43% {opacity: 0;}
50% {opacity: 0;}
59.66% {opacity:0;}
66.66% {opacity: 0;} */
76.33% {opacity: 0;}
83.33% {opacity: 1;} /*Visible keyframe of image 6 */
93% {opacity: 1;}
100% {opacity: 0;}
}
/* Standard syntax */
@keyframes image6 {
0% {opacity: 0;}/*
9.66% {opacity: 0;}
16.66% {opacity: 0;}
26.33% {opacity: 0;}
33.33% {opacity: 0;}
43% {opacity: 0;}
50% {opacity: 0;}
59.66% {opacity:0;}
66.66% {opacity: 0;} */
76.33% {opacity: 0;}
83.33% {opacity: 1;} /*Visible keyframe of image 6 */
93% {opacity: 1;}
100% {opacity: 0;}
}
/*****######### Header and its animations end here #######**/
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.*/
{
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.*/
}
@media only screen and (max-width: 720px) {
main {
width: 100%;
}
}
nav.top_menu /*I can use this for the main menu at the top of the page, with buttons for other pages */
{
height:35px;
text-align: center;
}
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. */
{
/*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. */
}
@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: 640px) {
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: 340px) {
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: 247px) {
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. */
}
}
img.thumbs_indexpage /*For the four thumbnail images on the index.html page. */
{
float:right;
clear: right;
margin: 0 0 0 10;
}
@media only screen and (max-width: 340px) {
img.thumbs_indexpage /*For the four thumbnail images on the index.html page. */
{
float:none;
clear: right;
margin: 0 0 0 0;
}
}
img.col-4_thumb /*For thumbnails of screeenshots and concept art that is meant to go into col-4 responsive grid columns. */
{
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;
}
img.col-4_thumb:hover {
/*border:1px solid #993300;*/
background-color: white;
}
img.reviewsites_reviewpage /*For the four thumbnail images on the index.html page. */
{
float:left;
clear: both;
margin: 5 10 20 0;
}
img.buylinks_buypage /*For the four thumbnail images on the index.html page. */
{
/*float:left;*/
clear: both;
margin: 5 0 10 15;
}
/***** Copied wrom W3C example of an image gallery. I plan to repurpose it for by sreenshot and concept art thumbnails */
/*
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
*/
/***** End of - Copied wrom W3C example of an image gallery. I plan to repurpose it for by sreenshot and concept art thumbnails */
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.*/
}
@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. */
}
}
@media only screen and (max-width: 640px) {
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. */
}
}
@media only screen and (max-width: 340px) {
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. */
}
}
@media only screen and (max-width: 247px) {
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. */
}
}
nav.footer /*For Obsidian, Bioware, and other links in the footer. */
{
position:relative;
display:block;
clear:both;
box-sizing: border-box;
margin:0;
padding:0;
height:65px;
text-align: center;
}
@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.*/
}
}