/* Get rid of white border around browser window */
body {
 margin: 0;
 padding: 0;
 background-color: black; 
}

#wrapper {
 /* Set your own widths, % for fluid, px for fixed */
 width: 100%;
 min-width: 780px;
 max-width: 1860px; /* Vertical margins, and auto to center */
 margin: 0 auto;
 background-color: #fff;
}

/* Get rid of large margins on headings */
h1, h2, h3, h4, h5, h6 {
 margin: 0;
}

/* HTML5 Template Styles for HTML5Template page */
/* Help older browsers with HTML5 layout elements */
header, nav, aside, article, footer, section, figure, figcaption {
 display: block;
}


/*================================== Layout Sections */
/*======== Styling for page header */
header {
background: black;
text-align: left;
color: #D6D6D6;
height: 100px;
}

/* Section containing multiple columns */
.columns {
 display: table;
 border-collapse: collapse;
 width: 100%; /* border is optional, style to taste */
 border: solid 1px silver;
}
/* Aside columns in columns div */
.columns aside {
 display: table-cell; /* Use any width and padding you like */
/* width: 18%; */
 padding: 1%;
}
/* Main article in the columns */
.columns article {
 font: 12pt Verdana, Arial, Helvetica, Sans-Serif;
 padding: 1%;
}
/*Optional, style to taste */
.columns .left,
 .columns .nav {
 width: 140px;
 background-color: #ddd;
 border-right: solid 1px gray;
}
.columns .right {
 font: 14pt Verdana, Arial, Helvetica, Sans-Serif;
 width: 160px;
 color: red;
 background-color: #ddd;
 border-left: solid 1px gray;
}
/* Style rules for formal, captioned figures */
figure {
 width: 80%;
 max-width: 300px;
 clear: both;
 margin: 1em auto;
 border: solid 1px gray;
 border-radius: 4px;
 box-shadow: 3px 3px 3px 3px silver;
}
figure img {
 width: 100%;
 display: block;
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
}
figcaption {
 font: 10pt/10pt Verdana, Tahoma, Sans-serif;
 padding: 2px 4px;
}
/* Left-floating pictures */
figure.floatleft {
 float: left;
 width: 33%;
 max-width: 400px;
 margin: 0 10px 0 0;
}
/* Right-floating pictures */
figure.floatright {
 float: right;
 width: 33%;
 max-width: 400px;
 margin: 0 0 0 10px;
}
/* Pictures with no caption */
figure.nocaption figcaption {
 display: none;
}
/* Pictures in the side columns */
.columns aside img {
 display: block;
 width: 90%;
 margin: 0.12em auto;
 border: solid 1px gray;
 border-radius: 4px;
 box-shadow: 3px 3px 3px 3px silver;
}


/* Entire gallery */
.gallery {
position: relative;
}
/* Smaller divs with 2 img tags each */
.gallery div {
padding: 2px;
width: 120px;
}
/*First image in each smaller div */
.gallery div img:nth-child(1) {
width: 100px;
}
/*Second image in each smaller div*/
.gallery div img:nth-child(2) {
position: absolute;
top: 10px; 
left: 120px;
z-index: 10;
visibility: hidden;
}
/* \ Hover on any smaller div */
.gallery div:hover img:nth-child(2) {
visibility: visible; 
}



/* This nav section is on the side, positioned absolutely */
aside nav {
/*   position: absolute; */
   top: 5%;
   left: 0;
   bottom: 15%;
   width: 100%;
   padding: 1%;
}

/*======== Styling for links in the nav section */
nav a {
 font: 9pt Verdana, Arial, Helvetica, Sans-Serif;
 font-weight: bold;
 background-color: #EEE;
 color: #333;
 text-decoration: none;
 outline: none;
 padding: 10px 0;
 display: block;
 border-right: solid 1px silver;
 border-bottom: solid 1px silver;
 border-radius: 5px;
 height: 40px;
 line-height: 20px;
 width: 100%;
 text-align: center;
 box-sizing: border-box; /* Box sizing for older browsers */
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
} 


nav a:link, nav a:visited {
 background-color: #EEE;
 background-size: auto 100%;
 color: #333;
 
}
nav a:hover, nav a:active, nav a.currentpage {
 background-color: #EEE;
 color: white;
 background-size: auto 100%;
 box-shadow: 0 30px 30px -20px black inset;
 font-style: italic;
}

h1 {
color: red;
font-size: 24px;
text-align: center;
}

h2 {
color: red;
font-size: 14px;
text-align: center;
}

h3 {
color: red;
font-size: 12px;
text-align: left;
}

h4 {
color: red;
font-size: 18px;
text-align: center;
}

h5 {
color: red;
font-weight: bold;
font-size: 30px;
text-align: center;
}

h6 {
color: blue;
font-weight: bold;
font-size: 18px;
text-align: center;
}

/* ==== Styling for footer */
footer {
 padding: 10px;
 text-align: center;
 background-color: #000;
}

footer img {
text-align: center;
}