/* HTML5 Template Styles for HTML5Template page */
/* Help older browsers with HTML5 layout elements */
header, nav, aside, article, footer, section, figure, figcaption {
 display: block;
}
/* Get rid of white border around browser window */
body {
 margin: 0;
 padding: 0;
font-family: Arial, 'Helvetica Neue', Helvetica, 'sans-serif';

}
html, body {
	min-height: 100%;	
}
footer {
	height: 100px;
 position: absolute;
    bottom: 0;
}
/* Get rid of large margins on headings */
h1, h2, h3, h4, h5, h6 {
 margin: 0;
}
ul{
	display: block;
}
#wrapper {
 /* Set your own widths, % for fluid, px for fixed */
 width: 100%;
 min-width: 780px;
 max-width: 2560px; /* Vertical margins, and auto to center */
 margin: 0 auto;
	position: relative;
}

.columns {
 display: table;
 border-collapse: collapse;
 width: 100%; 
 border: solid 1px silver;
 height: 100vh;
}

.columns aside {
 display: table-cell; /* Use any width and padding you like */
 width: 18%;
 padding: 1%;
}

.columns article {
 padding: 1%;
}
.columns .left {
 background-color:  #445778;
 border-right: solid 1px gray;
}
.columns .right {
 background-color:  #445778;
 border-left: solid 1px gray;
}
/* Style rules for formal, captioned figures */
figure {
 width: 80%;
 max-width: 600px;
 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;
}

figure.floatleft {
 float: left;
 width: 33%;
 max-width: 400px;
 margin: 0 10px 0 0;
}

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.5em auto;
 border: solid 1px gray;
 border-radius: 4px;
 box-shadow: 3px 3px 3px 3px silver;
}